Question

我有一个非常基本的要求，即在屏幕上显示左侧菜单（列），在右侧显示内容。我已经提出了一个基本代码，但它并没有真正解决我正在寻找的东西。首先是代码。

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;
}

这确实列出了内容，但我一直在寻找以下内容。

左侧菜单和内容列的高度应相等是，较小的div（菜单或内容）应该拉伸到排队与更大的div。
当div的内容都小于浏览器屏幕高度时，div（菜单和内容）都应该自我伸展以适应屏幕高度。

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

Answer 1

的 Demo 的

嗨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>

的 Live Demo 的

Answer 2

这是不使用人造柱的解决方案之一。它使用负边距的概念，如enter link description here所述。下面的代码满足了我在问题中提到的两个要求。

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;
}

的问候， NIRVAN

一些使用css帮助拉伸列

2 个答案: