1

以此为例：

<div id="content">
  <div id="leftDiv" style="background:green;"></div>
  <div id="rightDiv">
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
  </div>
</div>

我希望 leftDiv 有一个固定的宽度，比如说 100px，然后右 div 应该使用屏幕的其余部分作为宽度。我希望 leftDiv 高度与 rightDiv 相同或至少为屏幕高度的 100%，并且 leftDiv 的高度与内容对齐。

我在 stackoverflow 的某个地方找到了这段代码，但第一个问题是它使用 % 作为 div 的宽度，第二个是我希望 min-height 是屏幕的 100%：

.floatLeft {
  float: left;
}
.child-left,
.child-right {
  width: 50%
}
.child-left {
  background: yellow;
}
.child-right {
  background: none repeat scroll 0 0 green;
  float: right;
  height: 100%;
  position: absolute;
  right: 0;
}
.parent {
  overflow: hidden;
  position: relative;
  width: 100%;
}
<html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <!--[if IE]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->

</head>

<body>
  <div class="parent">
    <div class="child-left floatLeft">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content
    </div>

    <div class="child-right floatLeft">content content content content content content content content content content content content content content content content
    </div>
  </div>
</body>

</html>

我试着玩了好几个小时，但无法弄清楚。我不能将 child-left 设置为 100px 宽度和 child-right 宽度 auto，即使我将 *,html,body 设置为 100% 高度，我也不能将 min-height 设置为 100%。

4

2 回答 2

1

希望这是你正在寻找的..

#content {
  display: table;
  width: 100%;
  min-height: 100%;
  /* remove this line if not necessary */
}
#leftDiv,
#rightDiv {
  display: table-cell;
  min-height: 100%;
}
#leftDiv {
  width: 100px;
  background: green;
}
#rightDiv {
  background: cyan;
}
<html>

<head>

</head>

<body>
  <div id="content">
    <div id="leftDiv"></div>
    <div id="rightDiv">
      <p>Sample content</p>
      <p>Sample content</p>
      <p>Sample content</p>
      <p>Sample content</p>
    </div>
  </div>
</body>

</html>

于 2013-03-20T18:49:32.077 回答
0

这应该为您解决问题。但是请确保您的内容正确包装，因为我们使用的是溢出：隐藏。溢出：隐藏剪辑内容，甚至不显示其余内容的滚动条。

#outer {
  overflow: hidden;
  width: 100%;
}
#left {
  float: left;
  height: 100%;
  background: #fdd;
  width: 100px;
  overflow: auto;
}
#right {
  overflow: hidden;
  height: 100%;
  background: #ddf;
}
<html>

<head>


</head>

<body>
  <div id="outer">
    <div id="left">
      Left Div
    </div>
    <div id="right">
      Right Div
    </div>
  </div>
</body>

</html>

于 2013-03-20T18:27:33.267 回答