0

左側に 2 つの固定幅の列があり、残りの幅を埋めるメイン列があるページが必要です<body>。<div>各列内で、上部にオブジェクトを配置<ul>し、残りの高さを埋めるオブジェクトを配置したいと考えています。<ul>次のことを試しましたが、オブジェクトの高さを自動的に調整して高さを埋めることができませんでした。むしろ、その上の高さ分だけ下に溢れてい<div>ます。

<html>
<style>
body{
    margin:0;padding:0;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:red;
}
.column{
    float: left;
    background-color:blue;
}
.column>ul{
    height: 100%;
    width: 100;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color:green;
}
#main-column>ul{
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color:brown;
}
</style>
<body>
<div class="column">
  <div>Column 1 Title</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
<div class="column">
  <div>Column 2 Title</div>
  <ul>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>
<div id="main-column">
  <div>Main Column Title</div>
  <ul>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>
</body></html>

<ul>オブジェクトの高さが残りの高さを埋めるように自動的に調整されるようにするにはどうすればよいですか? これが私がこれまでに得たものです。スクロール バーが切り取られ、ウィンドウの境界線の下に伸びています。これは、その高さがオーバーフローしていることを示しています。

スクリーンショット

4

1 に答える 1

1

列のタイトルに固定の高さを指定すると、それを と一緒に使用して、必要なposition: absoluteレイアウトulを取得できます。デモ: http://jsbin.com/ecilob/1/edit

HTML:

<body>
    <div class="column fw">
        <div class="title">Column 1 Title</div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <div class="column fw">
        <div class="title">Column 2 Title</div>
        <ul>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
    <div class="column main">
        <div class="title">Main Column Title</div>
        <ul>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>
</body>

CSS:

body {
 margin: 0;
  padding: 0;
}

.column .title { 
  height: 30px;
  border-bottom: 1px dashed #333;
}

.column {
  background: lightblue;
  float: left;
  position: absolute;
  top: 0;
  bottom: 0;
}
.column + .column {
  background: coral;
  left: 120px;
}
.column + .column + .column { background: goldenrod; }

.column.fw {
  width: 120px;
}
.column.main {
  left: 240px;
  right: 0;
}

.column ul {
 position: absolute;
  margin: 0;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
}
于 2012-10-17T17:31:44.660 に答える