Question

假设我有一个带有左菜单（红色），内容div（蓝色）和页脚（绿色）的页面。因此，我页面的结构如下：

div主要

.... div left_menu左浮动

.... div内容，右移

div页脚（在div主目录之外）。

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>

html{
height:100%;
}

body{
  height:100%;
  width:80%;
  margin:0px auto;
  border: 1px solid black;
}


#main {
  background-color:#f0f0f0;
  height:80%;
}

#left_menu{
  background-color:red;
  width:25%;
  height:100%;
  float:left;
}

#content {
  background-color:gray;
  width:75%;
  float:right;
  min-height:100%;
  height:auto;
  font-weight: bold;
  color:blue;
}

#footer {
  vertical-align: top;
  background-color:green;
  width:100%;
  height:20%;
}
</style>
</head>
<body>

<div id="main">

<div id="left_menu">
<h1> My left menu</h1>
</div>

<div id="content">
	<p> Some content </p>
</div>
</div>
<div id="footer">
<p> My footer</p>
</div>
</body>
</html>

但是当我在div内容中放入更多内容时，此div会增加它的高度，这就是我想要的。但是，left_menu的大小保持不变，并且页脚不会下降（也就是说，内容显示在页脚上方）。

我认为div主元素会在内容增加时增加其高度，因此，它将页脚向下推到页面中。此外，由于left_menu具有height：100％（我认为这意味着div主高度的100％），因此我认为它将跟随右侧div的高度。但这些都没有发生。

因此，我的问题是：如何使left_menu div的大小与右侧的div相同，而页脚显示在主div的下方，而不是在div内容的下方？

这是相同的代码，但是在div内容中写入了更多内容：

<!DOCTYPE html>
<html>
<head>
<style>

html{
height:100%;
}

body{
  height:100%;
  width:80%;
  margin:0px auto;
  border: 1px solid black;
}


#main {
  background-color:#f0f0f0;
  height:80%;
}

#left_menu{
  background-color:red;
  width:25%;
  height:100%;
  float:left;
}

#content {
  background-color:gray;
  width:75%;
  float:right;
  min-height:100%;
  height:auto;
  font-weight: bold;
  color:blue;
}

#footer {
  vertical-align: top;
  background-color:green;
  width:100%;
  height:20%;
}
</style>
</head>
<body>

<div id="main">

<div id="left_menu">
<h1> My left menu</h1>
</div>

<div id="content">
	<p> Some content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
	<br />
	<p> More content </p>
</div>
</div>
<div id="footer">
<p> My footer</p>
</div>
</body>
</html>

Answer 1

更改HTML结构将使您可以使用Flexbox作为解决方案。使用flex，您可以判断两个菜单和内容项的增长，对齐方式有多种不同。

作为资源，我总是觉得这篇文章很有帮助： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html{
height:100%;
}

body{
  width:80%;
  margin:0px auto;
  border: 1px solid black;
}

#content{ display:flex; 
align-items: stretch;
}
#main {
  background-color:#f0f0f0;
  height:80%;
}

#left_menu{
  background-color:red;
  width:25%;
}

#right_content {
  background-color:gray;
  width:75%; 
  height:auto;
  font-weight: bold;
  color:blue;
}

#footer {
  vertical-align: top;
  background-color:green;
  width:100%;
  height:20%;
}

<div id="main">
  <div id="content">
    <div id="left_menu">
      <h1> My left menu</h1>
    </div>

    <div id="right_content">
      <p> Some content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
      <br />
      <p> More content </p>
    </div>
  </div>
</div>
<div id="footer">
  <p> My footer</p>
</div>

如何使div随右侧的div大小而增长？

1 个答案: