0

画面に左側のメニュー (列) があり、その右側にコンテンツがあるという非常に基本的な要件があります。基本的なコードを掲載しましたが、探しているものを正確に解決することはできません。まずコードはこちら。

HTML

<body>
<div id="wrapper">
    <div id="header">Header</div>
    <div id="left-column">Left Column</div>
    <div id="content">@RenderBody()</div>
</div>
</body>

CSS

    html, body 
{
    margin:0;
    padding:0;
}

#wrapper 
{
    margin:0 auto;
    width:1000px;           /* width of whole page */
}

#header 
{
    height:25px;
    background-color:lightblue;
}

#left-column 
{
    float:left;
    width:200px;
    background-color:maroon;
}

#content 
{
    float:left;
    width:800px;

    background-color:lightgray;
}

これは内容をレイアウトしますが、私は以下を探していました。

  1. 左側のメニューとコンテンツ列は同じ高さにする必要があります。つまり、(メニューまたはコンテンツの) 小さい方の div が大きい方の div に合わせて引き伸ばされます。
  2. 両方の div のコンテンツがブラウザー画面の高さよりも小さい場合、両方の div (メニューとコンテンツ) は画面の高さに合わせて伸縮する必要があります。

上記の2つの条件を達成するために必要な変更を提案できますか。

4

2 に答える 2

0

デモ

こんにちはNirvanあなたはこのように簡単に行うことができます

このCSSを書く 

    html, body{
margin:0;
padding:0;

}

#wrapper 
{
    margin:0 auto;

}
#header 
{
    height:25px;
    background-color:lightblue;
}

#left-column{
background:red;
  position:absolute;
  top:25px;
  left:0;
  width:200px;
  bottom:0;
width:200px;
}
#content {
background:green;
  position:absolute;
  left:200px;
  right:0;
  top:25px;
  bottom:0;
}

このhtmlを書く 

  <div id="wrapper">
    <div id="header">Header</div>

  <div id="left-column">Left Column <br >Left Column <br >Left Column <br ></div>
    <div id="content">@RenderBody() </div>

  </div>

ライブデモ

于 2012-11-08T05:09:23.557 に答える
0

これは、偽の列を使用しないソリューションの1つです。ここにリンクの説明を入力して説明されているように、負のマージンの概念を使用します。以下のコードは、質問で言及されている両方の要件を満たしています。

HTML

<body>
<div id="wrapper">
    <div id="header">Header</div>
    <div id="container">
        <div id="left-column">
            Left Menu
        </div>
        <div id="content">@RenderBody()</div>
    </div>
</div>

CSS

    html, body 
{
    margin:0;
    padding:0;
    height:100%;
}

#wrapper 
{
    margin:0 auto;
    width:1000px;
    height:100%;    
}

#header 
{
    width:1000px;
    position:fixed;
    top:0;
    height:25px;
    background-color:lightblue;
}

#container 
{
    overflow:hidden;
    min-height:100%;
}

#container #left-column
{
    float:left;
    padding-top:25px;
    background:maroon;
    width:200px;
    padding-bottom:5000px;
    margin-bottom:-5000px;
}


#container #content
{
    float:left;
    padding-top:25px;
    background-color:lightgray;
    width:800px;
    padding-bottom:5000px;
    margin-bottom:-5000px;
}

よろしく、 ニルヴァン

于 2012-11-08T06:49:34.823 に答える