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の幅として%を使用することです.2番目は、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>

私はそれを何時間もいじってみましたが、理解できません。*,html,body を 100% の高さに設定しても、child-left を 100px の幅と child-right の幅を auto に設定することはできません。

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

これでうまくいくはずです。ただし、overflow:hidden を使用しているため、コンテンツが適切にラップされていることを確認してください。Overflow:hidden はコンテンツをクリップし、残りのコンテンツのスクロール バーを表示しません。

#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 に答える