flexboxgrid, ширина = 100vw, высота = 100vh, полосы прокрутки все равно отображаются - PullRequest
Новая
       22

flexboxgrid, ширина = 100vw, высота = 100vh, полосы прокрутки все равно отображаются

0 голосов
/ 25 июня 2018

ОК, проблема в том, что я установил ширину и высоту для размера области просмотра, но если я напишу какой-либо текст внутри <h1></h1>, появятся полосы прокрутки.Я не могу понять, почему он так себя ведет, полагаю, я делаю что-то нубистское.Я сделал несколько дизайнов только с помощью HTML и CSS и никогда не сталкивался с чем-то подобным, на этот раз я пытался провести адаптивное тестирование дизайна с помощью FlexBoxGrid и столкнулся с этим.как я уже сказал, как только я удалю текст внутри <h1></h1> полосы прокрутки исчезнут.То же самое происходит с теми, кто прокомментировал <h3></h3>.бывает с <p></p> тоже ...: / 

<body>
<!-- HEADER SECTION -->
<header id="sec_home">
    <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h1>sdfsdf</h1>
            <!--<h3>
                The beast.
            </h3>
            <h3>
                The best.
            </h3>-->
        </div>
    </div>
</header>

<!-- BIOGRAPHY SECTION -->
<section id="sec_bio">

</section>


* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'BlkLite'; /*a name to be used later*/
    src: url('/fonts/BlkLite.ttf'); /*URL to font*/
}

h1 {
    font-family: 'BlkLite';
    font-size: 8em;
    color: rgb(206, 206, 206);
    background-color: blueviolet;
}

#sec_home {
    background-image: url("/bg/14582.jpg");
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
}

1 Ответ

0 голосов
/ 26 июня 2018

мне кажется, что содержимое, попадающее в эту сетку flex-box, расширяет область, над которой вы работаете.

попробуйте добавить "box-sizing: border-box" к элементу с помощью flex-коробка на нем?это может сработать для вас.

также, если дело доходит до него ... это грязно, но ... overflow-y: hidden и overflow-x: hidden удалит переполнение этого контейнера и сделаетэто так, что это не будет прокручиваться ... но снова ... это грязно по моему мнению.

...