Question

我有一个包含两列的网站，一个是内容，另一个是菜单。菜单相当大，有时会高于内容窗格。我现在基本上有以下设置：

.container {
    width: 300px;
    margin: auto;
    background: red;
}
#first {
    width: 75%;
    float: left;
    background-color: blue;
}
#second {
    width: 25%;
    float: left;
    background-color: green;
    color: white;
}
#clear {
    clear: both;
}
a {
    color: white;
}
* {
    color: white;
}

<div class='container'>
    <div id="first">Some content</div>
    <div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
    <div id="clear"></div>
</div>

即使我添加#first，height: 100%; div也无法到达容器的底部。我该如何解决这个问题？

Answer 1

你的父母需要一个高度，一直到html / body标签

.container {
  display: flex;
  width: 300px;
  margin: auto;
  background: red;
}
#first {
  flex: 1;
  width: 75%;
  background-color: blue;
}
#second {
  flex: 1;
  width: 25%;
  height: 300px;
  background-color: green;
  color: white;
}
a {
  color: white;
}
* {
  color: white;
}

    <div class='container'>
        <div id="first">Some content</div>
        <div id="second">Menu</div>
    </div>

对于旧浏览器... display: table

.container {
  display: table;
  width: 300px;
  margin: auto;
  background: red;
}
#first {
  display: table-cell;
  width: 75%;
  background-color: blue;
}
#second {
  display: table-cell;
  width: 25%;
  height: 300px;
  background-color: green;
  color: white;
}
a {
  color: white;
}
* {
  color: white;
}

<div class='container'>
        <div id="first">Some content</div>
        <div id="second">Menu</div>
    </div>

Answer 2

您可以使用flexbox

＆＃13;

.container {
width: 300px;
margin: auto;
background: red;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#first {
width: 75%;
float: left;
background-color: blue;
}
#second {
width: 25%;
float: left;
background-color: green;
color: white;
}
#clear {
clear: both;
}
a {
color: white;
}
* {
color: white;
}

＆＃13;

<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
<div id="clear"></div>
</div>

＆＃13;

Answer 3

你必须给容器一个高度，因为如果不是#first将是100％如果父母没有高度，孩子不能100％的那个!!

也许你给他300px像#second或更少，然后你给#first 100％它会工作

如何使窗格扩展到其容器的底部

3 个答案: