сделать 100% высоты отзывчивых для любого устройства

Как я дать 100% высоты DIV, когда я дать высоту 100% (Это не работает), то я даю высоту 100vh затем мин-высоте 100vh но создать дополнительное пространство и div становятся больше, чем требуется, я также стараюсь max-height, но не работает. Я хочу дать высоту 100% элемента, что любое его небольшое устройство. В этом примере высота становится больше экрана и делает свиток. как я получаю только 100% без прокрутки без какого-либо элемента.сделать 100% высоты отзывчивых для любого устройства

<!doctype html> 

<div class="header">asas 
</div> 

<div class="main"> 
</div> 

<div id="footer"> 


</div> 

<style> 
.header 
{ 
    width:100%; 
    height:60px; 
    background:#000; 

    } 
.main 
{ width:100%; 
min-height:100vh; 
    background:#C00; 

    } 
    #footer 
    {width:100%; 
    height:100px; 
    background:#0C3; 
     } 
</style>

источник

2016-06-01 rahil

Вы можете использовать calc() взлетать значения верхнего и нижнего колонтитула:

body {margin:0} 
 
.header { 
 
    height: 60px; 
 
    background: #000; 
 
} 
 
.main { 
 
    min-height: calc(100vh - 160px); 
 
    background: #C00; 
 
} 
 
#footer { 
 
    height: 100px; 
 
    background: #0C3; 
 
}

<div class="header">asas 
 
</div> 
 

 
<div class="main"> 
 
</div> 
 

 
<div id="footer"> 
 
</div>

источник

2016-06-01 19:25:17 DaniP

вы можете попробовать, как этот вы должны дать родителю всегда определенную высоту если он не работает, если вы работаете с%

body{ 
 
    margin:0; 
 
    height:100vh; 
 
} 
 
.header { 
 
    width: 100%; 
 
    height: 60px; 
 
    background: #000; 
 
} 
 
.main { 
 
    width: 100%; 
 
    height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/ 
 
    background: #C00; 
 
} 
 
#footer { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #0C3; 
 
}

<body> 
 
<div class="header">asas 
 
</div> 
 

 
<div class="main"> 
 
</div> 
 

 
<div id="footer"> 
 
</div> 
 
</body>

источник

2016-06-01 19:25:39 DanyCode

Если вам не нужно Internet Explorer, то вы могли бы использовать flexbox

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.main { 
 
    flex: 1; 
 
    background-color: cyan 
 
} 
 

 
.header { 
 
    background-color: red; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 

 
.footer { 
 
    background-color: green; 
 
    padding: 10px; 
 
    text-align: center; 
 
}

<div class="wrapper"> 
 
    <div class="header">Header</div> 
 
    <div class="main">Content</div> 
 
    <div class="footer">Footer</div> 
 
</div>

источник

2016-06-01 19:36:57

сделать 100% высоты отзывчивых для любого устройства

ответ

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