如何使用CSS使列在页眉和页脚之间达到窗口的全高度并防止未包装

Question

I want to make a simple HTML layout using CSS where I have a header, two columns where the column on the right is a fixed width (say 100px for now). 我想使用CSS创建一个简单的HTML布局，其中有一个标题，两列，其中右边的列为固定宽度（例如现在为100px）。 The left column will at some point have generated content, it shouldn't run past the page bottom but it may it may in the future... anyway I want both of my columns to stretch to the footer... here is my HTML: 左列有时会生成内容，它不应超出页面底部，但将来可能会...无论如何，我希望两列都可以扩展到页脚...这是我的HTML ：

<!DOCTYPE html>
<html>
<head>
  <title>Coming soon...</title>
</head>
<body>
<div class="wrapper">
    <div class="header">
        Header
    </div>
    <div class="content">
         Content Here will be dynamic... sometimes 1 word, sometimes 1000 words! Either way, I want to reach the footer!

    </div>
    <div class="right-menu">
        Here will be a menu... I want this to be the same height as 
      the content DIV
    </div>
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

and here is my CSS: 这是我的CSS：

.header {
    background-color: Coral ;
    width: 100%;
}

.content {
    background-color: BlanchedAlmond ;
    float:left;
    width:100%;
    margin-right: -100px;

}

.right-menu {
    background-color: BurlyWood ;
    float: right;
    width: 100px;
}

.footer {
    background-color: Coral;
    width: 100%;
    clear: both;
    position: absolute;
    bottom: 0;
}

I made a JSFiddle of this and I noticed that my content div also seems to run under my menu... how could I prevent this too: https://jsfiddle.net/dwn82s81/ 我对此做了一个JSFiddle，我发现我的内容div似乎也可以在菜单下运行...如何也可以防止这种情况： https : //jsfiddle.net/dwn82s81/

Many thanks in advance. 提前谢谢了。 I realized that I haven't written any CSS for ages! 我意识到我已经很久没有编写任何CSS了！

Answer 1

Try this change to .content 尝试将此更改更改为.content

 .content { background-color: BlanchedAlmond ; float:left; width: 95%; margin-right: -100px; }

Answer 2

If you are willing to limit IE compatibility then you could use display:flex 如果您愿意限制IE的兼容性，则可以使用display:flex

Please note that this is a very basic setup. 请注意，这是一个非常基本的设置。

 html, body { height: 100%; } .wrapper { display: flex; flex-direction: column; height: 100%; } .content-wrapper { flex: 0 0 70%; background: orange; display: flex; } .content { flex: 1 0 auto; } .right-menu { flex: 0 1 150px; } .header, .footer { flex: 0 0 15%; }

 <div class="wrapper"> <div class="header"> Header </div> <div class="content-wrapper"> <div class="content"> Content Here will be dynamic... sometimes 1 word, sometimes 1000 words! Either way, I want to reach the footer! </div> <div class="right-menu"> Here will be a menu... I want this to be the same height as the content DIV </div> </div> <div class="footer"> footer </div> </div>

如何使用CSS使列在页眉和页脚之间达到窗口的全高度并防止未包装

问题描述

2 个解决方案

解决方案1
0 2016-10-12 20:12:22

解决方案2
-1 2016-10-12 20:12:24

如何使用CSS使列在页眉和页脚之间达到窗口的全高度并防止未包装

问题描述

2 个解决方案

解决方案1 0 2016-10-12 20:12:22

解决方案2 -1 2016-10-12 20:12:24

解决方案1
0 2016-10-12 20:12:22

解决方案2
-1 2016-10-12 20:12:24