当前位置: 动力学知识库 > 问答 > 编程问答 >

html - how to do fixed nav, footer and content of remaining height without javascript or display:table?

问题描述:

Working on something that requires this type of layout:

i need the content to have an implied size of the remaining space on the screen. i tried many things

<div id="wrapper">

<div id="header">

</div>

<div id="content">

</div><!-- /content -->

<div id="footer">

</div>

</div>

this works with display table technique:

#wrapper {display: table; height: 100%; width: 100%; background: yellow;}

#header { display: table-row; background: black;height: 50px;}

#container { display: table-row; height: 100% }

#footer {display: table-row;background: black; height: 50px;}

but how would I do it without it?

#wrapper {width: 100%; height: 100%; position: relative; min-height: 800px;}

#header {position: relative; width: 100%; height: 42px;}

#footer {height: 45px; width: 100%; background: #000; position: absolute; bottom: 0; overflow-y: hidden;}

also I dont want the content to be position:absolute

网友答案:

This might work, if you can live with fixed heights:

body, html, #wrapper, #content
{
    height: 100%;
    margin: 0;
    padding: 0;
}

#header,
#footer
{
    position: relative;
    height: 42px;
    background: red;
}
#content
{
    height: auto;
    min-height: 100%;
    margin:-42px 0;
    padding: 42px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Here is the fiddle.

网友答案:

Use this HTML

<div id="wrapper">
<div id="header">This is my header
</div>

<div id="content">This is my content
</div><!-- /content -->


<div id="footer">This is my footer
</div>
</div>

And css goes like this

#wrapper {width: 100%; 
height: 100%; 
position: relative; 
min-height: 800px;}


#header {position: relative; 
width: 100%; 
height: 42px; 
background-color:#CA3A3A;}


#content{background-color:#089ED0;
min-height: 800px;}


#footer {height: 45px; 
width: 100%; 
background-color:#CA3A3A; 
position: absolute; 
bottom: 0; 
overflow-y: hidden;}
网友答案:

This has worked for me in the past: http://ryanfait.com/sticky-footer/

网友答案:

the best solution i found for this is using css3's new calc method. I also test for its availabilty with modernizr, and if its not available, I manually set the height of the container area with JS.

分享给朋友:
您可能感兴趣的文章:
随机阅读: