0

2 列のサイトを作成しようとしています。左側の列は幅が固定されていますが、高さが問題になっています。高さは、ウィンドウの高さまたは右側の列の高さ (どちらか高い方) にする必要があります。

私の現在のソリューションでは、右の列がブラウザー ウィンドウよりも高く、下にスクロールすると、左の列が切り取られます。

HTML

<div class="side-container">
  <!-- left side -->
  <aside>Left: Fixed width, 100% height of the window or right hand content</aside>
  <!--
  main content -->
  <article>Right: Fluid width</article>
</div>

CSS

.side-container {
  height:100%;
}
.side-container {
  margin: 0;
  padding: 0;
  padding-right: 200px;
  background: rgb(202, 147, 147);
}
aside {
  float: left;
  width: 200px;
  background-color: #e0e0e0;
  height: 100%;
  position: absolute;
  background-color: #e0e0e0;
}
article {
  margin: 0 0 0 200px;
  width: 100%;
  background-color: fuchsia;
  background-color: fuchsia;
}

フィドル

4

1 に答える 1

0

本当に必要だったのは、min-height代わりheightにいくつかの場所で使用することだけでした:

http://jsfiddle.net/t3AxY/3/

html, body {
    min-height: 100%;
}

.side-container{
    min-height:100%;
    }

.side-container {
    margin: 0;
    padding: 0;
    padding-right: 200px;
    background: rgb(202, 147, 147);
    }

aside{
    float: left;
    width: 200px;
    background-color: #e0e0e0;
    min-height: 100%;
    background-color: #e0e0e0;
    }

article {
    margin: 0 0 0 200px;
    width: 100%;
    background-color: fuchsia;
    }
于 2013-01-18T14:35:00.003 に答える