Может ли кто-нибудь помочь мне с приведенной ниже иллюстрацией?Динамическая установка высоты
<body>
<header height="100px"></header>
<main height="rest of the height of viewport"></main>
</body>
Я хочу <header> определенной заранее определенной высоты, но хотите, чтобы остальная часть высоты окна просмотра будет прочитан <main>.
ПРИМЕЧАНИЕ: Никакой код JavaScript, пожалуйста.
CSS
header {
height: 100px;
}
main {
height: calc(100vh - 100px);
}
Что произойдет здесь есть В.Х. ваша высота окна просмотра. Поэтому мы должны вычесть его в высоту заголовка.
Рабочая Fiddle: https://jsfiddle.net/y10p9atj/
Надеется, что это помогает.
Это также возможно использовать flex box в css. Но это не будет поддерживать более старый браузер, такой как IE9>.
<div class="flex">
<header class="header"></header>
<main class="flxGrow main"></main>
</div>
.flex{
display:flex;
flex-flow:column wrap;
height:100%
}
.flxGrow{
flex-grow:1;
}
.header{
padding:20px;
background:red;
}
.main{
background:blue
}
body,html{
height:100%;
margin:0
}
Главное преимущество использования flexbox over vh (вертикальная высота), нет необходимости в вычислении высоты руководства заголовка. Это решение будет гибким с любой динамической высотой заголовка. Также смотрите скрипку here
Попробуйте это Его автоматически подстраивает любую резолюцию 100px минус его высоты https://jsfiddle.net/samudrala/frw31kbh/
body {
margin: 0;
padding: 0;
height:100vh;
}
header {
height: 100px;
width: 100%;
background: #ff8800;
}
main {
height: calc(100% - 100px);
height:-webkit- calc(100% - 100px);
height:-moz-calc(100% - 100px);
width: 100%;
background: green;
}<body>
<header></header>
<main></main>
</body>
хорошей работа .. но высота окна косяка работа с окнами сафари –
HTTP : //caniuse.com/#feat=viewport-units –
Если вы хотите поддерживать старый браузер. Вы должны использовать javascript вместо css. Как сказал ОП. Нет JS. Это также легко сделать это на js. –