固定宽度，根据父 div 的高度，以及根据屏幕内容和宽度其余部分的父 div 高度？答案

【问题标题】：Fixed width, height acording to parent div, and parent div heights acording to content and width rest of sreen?固定宽度，根据父 div 的高度，以及根据屏幕内容和宽度其余部分的父 div 高度？
【发布时间】：2013-03-10 00:15:48
【问题描述】：

以此为例：

<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%。

【问题讨论】：

标签： html css height width

【解决方案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>

【讨论】：

正是我想要的，非常感谢，如此简单：D
当我把放在标记之前，最小高度不起作用，为什么？
如果你使用声明，这里有个技巧.. 将以下内容添加到 css，html { height: 100%; } body { height: 100%; /* still if you need the margin */ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 8px; margin: 0; }

【解决方案2】：

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

#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>

【讨论】：

好的，不知道，然后我必须找到一个没有溢出的解决方案：隐藏，因为我需要的只是如果内容的高度更小然后屏幕那么高度应该是 100% 但如果内容是高度然后屏幕，左侧 div 的高度应该与内容高度相同，并且应该出现滚动条
溢出：自动；仅当内容超出屏幕时才显示滚动条。所以在左侧 div 中将溢出更改为自动。
是的，更喜欢它 :-) 如果我希望左 div 在我向下滚动时跟随下来怎么办？就像如果左侧 div 中几乎没有内容而右侧有很多内容，当我一直向下滚动时，我不应该看到左侧 div 的顶部。