Html 有些帮助使用css拉伸列_Html_Css

Html 有些帮助使用css拉伸列

html css

Html 有些帮助使用css拉伸列,html,css,Html,Css,我有一个非常基本的要求，在屏幕上有一个左边的菜单（列），内容在右边。我已经提出了一个基本的代码，但它并没有真正解决我到底在寻找什么。首先是代码 Html文件 <body> <div id="wrapper"> <div id="header">Header</div> <div id="left-column">Left Column</div> <div id="content">@Re

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

Html文件

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

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

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

左侧菜单和内容列的高度应相等，即是的，较小的div（菜单或内容）应该伸展成一行用较大的div

当两个div的内容都小于浏览器屏幕高度时，两个div（菜单和内容）都应拉伸以适应屏幕高度任何人都可以为实现上述两个条件提出必要的修改建议。

嗨，尼尔万，你可以像这样轻松地完成

编写此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;
}

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

编写此html

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

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


标题
左栏
左栏
左栏

@RenderBody（）

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

Html文件

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

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

问候,，

NIrvan

Rohit，谢谢你的回复。它确实解决了我的第一个要求。柱子似乎在伸展。但是这些列并没有延伸到屏幕的底部。能把它们伸到窗户的底部吗？罗希特，是的，正是我想要的。然而，我将测试它，看看如果contentdiv的内容非常大会发生什么。再次非常感谢。Rohit，当content div的内容非常大时，它会失败。尝试垂直重复@RenderBody，然后滚动查看问题。然而，我从你的代码中得到了很多想法。我已经粘贴了我的代码作为解决方案之一。非常感谢你的时间和努力。