1

私はこのHTML構造を持っています

<div id="header">
    …
</div>
<div id="menu">
    ...
</div>
<div id="content">
    ...
</div>
<div id="footer">
    ...
</div>

そしてCSS：

#header {
    height: 100px;
}

#footer {
    border: 1px solid #989898;
    padding-bottom: 0.1em;
    width: 100%;
    height: 2.2em;
    position: fixed;
    bottom: 0px;
    left: 0px;
}

#menu {
    width: 150px;
    float: left;
    ???
}

#content {
    ???
}

ヘッダーとフッターは問題ありませんが、質問はメニューとコンテンツのdivから来ています。

'menu' divは、スクロールせずにヘッダーからフッターに入力する必要があります

「コンテンツ」は、必要に応じてスクロールを表示する必要があります。

それらのためのどのCSSコードがそれを現実のものにしますか？

ありがとう

4

4 に答える 4

1

私はあなたの答えを試しましたが、結果は満足のいくものではないので、最終的に私は私のためにより良い解決策を作りました：

http://jsfiddle.net/cVdeT/

于 2011-03-30T10:56:01.920 に答える
0

私はずっと前にそのような問題を抱えていました、これが役立つことを願っています

HTML


<div id="wrapper">
  <div id="header">
    ...
  </div>
  <div id="menu">
    ...
  </div>
  <div id="content">
    ...
  </div>
  <div id="footer">
    ...
  </div>
</div>

CSS


#wrapper
{
  position: relative;
  ...
  ...
}

#header
{
   position: absolute;
   top: 0;
   left: 0;
   height: 100px;
}

#footer
{
   position: absolute;
   bottom: 0;
   height: XXXpx;
   display: block;
}

#menu
{
   position: absolute;
   top: 110px;
   left: 0;
   bottom: 0;
   width: 150px;
   height: 100%;
   display: block;
}

#content
{
   position: absolute;
   top: 110px;
   left: 160px;
   width: XXXpx;
   display: block;
}
于 2011-03-30T10:40:16.970 に答える
0

私のアプローチは、「menu」と「content」を次のように独自のラッパーでラップすることです。

<div id='contentWrapper'>
    <div id="menu">
        ....
    </div>
    <div id="content">
        ....
    </div>
</div>

このようなスタイル：

    #contentWrapper {
        width: 1000px;
        overflow: hidden;
        background-color: yellow;
    }

    #menu {
        width: 150px;
        float: left;
        background-color: transparent;
    }

    #content {
        width: 850px;
        float: left;
        background-color: white;
    }

色は説明するためにあります。実際、メニューは以前と同じ高さであり、何を入れてもその周りに広がりますが、メニューが透けて見えるため、常に「コンテンツ」の高さ全体を占めるように見えます。ラッパーからの色-メニューとコンテンツの両方に広がります。

于 2011-03-30T10:40:25.673 に答える
0

これを試して

#menu { width: 150px; height: 100%; overflow-y: auto; display: block; }

于 2011-03-30T10:42:03.013 に答える