Как предотвратить залезание div под div [закрыто]

347

10 декабря 2016, 10:42

Здравствуйте. Я ставлю блоки которые при уменьшении изображения должны сдвигаться друг под друга, но не должны заползать под меню которое справа. Можно поставить что бы блок в котором содержатся остальные блоки (те что маленькие) в процентном соотношении, аля-87%, но все равно когда я размер окна уменьшаю, то основной блок залезает под меню и происходит все сначала.

Answer 1

Используй bootstrap для создания адаптивной верстки.

HTML:

<body>
    <main>
        <div class="container">
            <div class="row">
               <!--Block #1 -->
                <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 block equal">
                   <!-- Block #1 -->
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 block i1">
                        <h1>block 1</h1>
                    </div>
                    <!-- Block #2 -->
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 block i2">
                        <h1>block 2</h1>
                    </div>
                    <!-- Block #3 -->
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 block i3">
                        <h1>block 3</h1>
                    </div>
                </div>
                <!--Block #4 -->
                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 block i4">
                    <h1>block 4</h1>
                </div>
            </div>
        </div>
    </main>
</body>

CSS:

.block {
    border: 1px solid black;
}
.i1 {
    min-height: 200px;
}
.i2 {
    min-height: 200px;
}
.i3 {
    min-height: 700px;
}
.i4 {
    min-height: 1100px;
}
.equal {
    padding-left: 0px;
    padding-right: 0px;
}

Не забудь подключить библиотеку c CSS от Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

По поводу overflow:auto :

Сначала тебе нужно указать min-height для блока
Указать overflow:auto
Прокрутка появиться тогда, когда высота контента блока больше указанного min-height
Если нужно прокрутку раньше, уменьши min-height (Пункт №1)