How to make a div expand to fit available vertical

2020-02-01 03:31发布

站内问答 / HTML/CSS
1591 3 6

I'm looking for a way to make the div that contains my main page content to expand to fit the space left after adding my header and footer. The HTML is laid out like so:

<div id="wrapper">
    <div id="header-wrapper">
        <header>
            <div id="logo-bar"></div>
        </header>
        <nav></nav>
    </div>
    <div id="content"></div>
</div>


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

It's designed so that the footer is always past the bottom of the page by setting the min-height of #wrapper to 100%. The problem is that #content doesn't expand to fill the empty space inside the #wrapper, making it difficult to get the look I want. How can I make it do that?

标签： html css
举报
3条回答
forever°为你锁心
2楼-- · 2020-02-01 03:44

This solution solves scrolling problems. When page is oversized, your footer is placed 2 new lines from the whole content:

   <style>
       #container {
        position: relative;
        height: 100%;
     }
     #footer {
        position: absolute;
        bottom: 0;
     }
    </style>

    </HEAD>

    <BODY>

     <div id="container">

        <h1>Some heading</h1>

    <p>Some text you have</p> 

    <br>
    <br>

    <div id="footer"><p>Rights reserved</p></div>

    </div>

    </BODY>
    </HTML>
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2020-02-01 03:54

A good article for footers is at A List Apart: http://www.alistapart.com/articles/footers/

It has the actual example of how you position a footer at the bottom with the expanding content div.

查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
4楼-- · 2020-02-01 04:07

EDIT:
Why not use top and bottom. Here's a full example.
You can tweak the top and bottom values, to optimize your header/footer placement.

<html>
 <head>
  <style type="text/css">
   BODY {
     margin: 0;
     padding: 0;
   }

   #wrapper {
     position: relative;
     height: 100%;
     width: 100%;
   }

   #header-wrapper {
     position: absolute;
     background-color: #787878;
     height: 80px;
     width: 100%;
   }

   #content {
     position: absolute;
     background-color: #ababab;
     width: 100%;
     top: 80px;
     bottom: 50px;
   }

   #footer-wrapper {
     position: absolute;
     background-color: #dedede;
     height: 50px;
     width: 100%;
     bottom: 0;
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
    <div id="header-wrapper">
      <div id="header">
        <div id="logo-bar">Logo</div>
      </div>
      <div id="nav"></div>
    </div>
    <div id="content">Content</div>
    <div id="footer-wrapper">
      <div id="footer">Footer</div>
    </div>
  </div>
 </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)