Установка DIV в зависимости от высоты браузера

Я хочу создать HTML-код с помощью Bootstrap. Но у меня проблема. Я не настраиваю высоту div в зависимости от высоты браузера. Я попробовал все, что знаю.Установка DIV в зависимости от высоты браузера

Как можно отрегулировать по высоте высоту браузера в Div в?

Вот мой код:

body{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#leftMenu{ 
 
    height: 500px; 
 
} 
 

 
#viewport{ 
 
    height: 400px; 
 
    overflow: hidden; 
 
} 
 

 
#informationMenu{ 
 
    height: 100px; 
 
    overflow: scroll; 
 
} 
 

 
#rightMenu{ 
 
    height: 500px; 
 
}

<body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu" style="background-color: #cc0052" > 
 
      </div> 
 
      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> 
 
       <div class="row" id="viewport" style="background-color: aquamarine"> 
 
       </div> 
 
       <div class="row" id="informationMenu" style="background-color: cadetblue"> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu" style="background-color: #bfff00"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

источник

2017-01-15 Şeyma Yaman

Какие ДИВ мы говорим? – LGSon

На самом деле, я хочу, чтобы высота leftMenu и rightMenu составляла 100%, высота видового экрана 80%, а информация высота Menu - 20%. –

Что-то вроде этого: https://jsfiddle.net/smbtcfwf/ .... Если да, то я отправлю его в качестве ответа, а – LGSon

Вы должны использовать vh по высоте. Он также имеет отзывчивый дизайн. 1hv = 1% от высоты окна просмотра (Broswer), а это означает, что 100vh будет значение вам нужно;)

Edit: Если вы пытаетесь сделать то же самое для ширины, вам нужно использовать vw вместо vh, потому что vh относится к высоте и vw относится к ширине;)

источник

2017-01-15 12:49:13

Да он работает на высоте, но теперь моя ширина не работает :( –

Для ширины вы shoulde использовать 'vw' вместо' vh';) –

Да теперь работает, как я хочу. Спасибо :) –

Установка DIV в зависимости от высоты браузера

ответ

Смежные вопросы