发表新帖
发表新帖

How can an html element fill out 100% of the remaining screen height, using css only?

后端 未结
关注
17 1689
名媛妹妹
名媛妹妹 2020-12-22 16:13

I have a header element and a content element:

#header
#content

I want the header to be of fixed height and the content to fill up all the

相关标签:
17条回答
  • 北荒
    2020-12-22 16:57

    The trick to this is specifying 100% height on the html and body elements. Some browsers look to the parent elements (html, body) to calculate the height. 

    <html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}
    0 讨论(0)
  • 轻奢々
    2020-12-22 17:01

    You can also set the parent to display: inline. See http://codepen.io/tommymarshall/pen/cECyH

    Be sure to also have the height of html and body set to 100%, too.

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-22 17:02

    With HTML5 you can do this:

    CSS:

    body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

    HTML:

    <header>blabablalba </header>
<section> Content </section>
    0 讨论(0)
  • 广开言路
    2020-12-22 17:02

    Have you tried something like this?

    CSS:

    .content {
    height: 100%;
    display: block;
}

    HTML:

    <div class=".content">
<!-- Content goes here -->
</div>
    0 讨论(0)
  • 自闭症患者
    2020-12-22 17:05

    In this instance I want my main content div to be liquid height so that the whole page takes up 100% of the browser height.

    height: 100vh;

    0 讨论(0)
  • -上瘾入骨i
    2020-12-22 17:09

    CSS PLaY | cross browser fixed header/footer/centered single column layout

    CSS Frames, version 2: Example 2, specified width | 456 Berea Street

    One important thing is that although this sounds easy, there's going to be quite a bit of ugly code going into your CSS file to get an effect like this. Unfortunately, it really is the only option.

    0 讨论(0)
 看不清?
提交回复
热议问题