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（Menu 或 Content）应拉伸以与较大的 div 对齐。
  2. 当两个 div 的内容都小于浏览器屏幕高度时，那么 div（菜单和内容）都应该拉伸自己以适应屏幕高度。

任何人都可以建议为实现上述两个条件进行必要的修改。

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

这是不使用人造列的解决方案之一。它使用负边距的概念，如在此处输入链接描述中所述。下面的代码满足我在问题中提到的两个要求。

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 回答