Question

我有一个CSS侧边栏，可以在我的网站上显示链接。但是，它并没有像我想要的那样填满整页高度。 如何使这项工作？

Answer 1

昨天我想到了一个更简单的方法。

去看看我忙碌的网站：http://www.atlm.co.za/aboutconcepts.html并以蓝色查看右侧边栏。

通过将侧边栏作为主要容器并将左侧较大的白色内容区域作为浮动对象来轻松实现...

非常简单，只需记住清除浮子，让蓝色主容器向下延伸到底部。

<div class="maincontainer">
<div class="maincontent_blue">

<!-- Title -->



<!-- Title__end -->      




<div class="mainleft">

<h1 style="text-align:center">About Concepts</h1>

<p><img src="images/aboutlogo1.png" width="500" height="284" /></p>
<p><a href="pdf/Media Pack About Concepts 201102_1.pdf" title="About Concepts Media Pack" target="_blank"><img src="images/aboutmp.png" width="500" height="284" /></a></p>
<p><img src="images/aboutp1.png" width="500" height="284" /></p>
<p><img src="images/aboutp2.png" width="500" height="284" /></p> 
<p><img src="images/aboutlogo2.png" width="500" height="284" /></p>
<p><img src="images/aboutlogo3.png" width="500" height="284" /></p>     


<p>&nbsp;</p>

</div>

<p>&nbsp;</p>

<p style="padding-top:40px">We designed a About Concepts' new logo for them in a record time and they were greatly impressed with our service.</p>

<p style="padding-top:185px">After the logo design, they needed us to design presentational tools for their sales people. We then sat down with the Marketing Manager, Sales Manager and a few of the sales people to really understand what the company was all about and how we were to approach the project and also how we could compliment their excellent sales team with tools that would almost do their jobs for them.</p>
<p style="padding-top:600px">After satisfying their needs and after some time they >came back to us and asked us to design a new logo that would shift trends as they were >moving into new offices with a modern design. We jumped to the opportunity to greatly >improve their already fantastic logo. This is what we came up with. We later heard back >from them and all the compliments they were getting on the great new logo. They >&quot;stood from the crowd&quot; as the owner stated.</p>
<div class="clearfloat"></div>

</div>
<!-- end .maincontent_blue -->        
</div><!-- end .maincontainer -->

这是我使用的html，css如下：

.maincontent_blue {
  margin-top: 0;
  padding-bottom: 0;
  width: 100%;
  background: #00D7E8;
  color:#fff;
}


.mainleft {
  height: 100%;
  float: left;
  background: #fff;
  padding-top: 5px;
  padding-bottom: 10px;
  width: 600px;
  margin-right: 15px;
  margin-bottom: 0;
}

这很简单，我想任何人都可以关注我的代码..

Answer 2

最简单的方法就是：

height: 100vh;

其中'vh'代表浏览器窗口的垂直高度。响应调整浏览器和移动设备的大小。

Answer 3

我添加了ul并将填充从外部div移到ul上的边距 - 现在滚动条消失了（至少我认为这是问题？）

请参阅http://jsfiddle.net/Pw4FN/1/

Answer 4

position:absolute;
width:100px;
height:100%;
top:0;
left:0;

元素不能浮动，或者它不会填满整个页面，并且顶部或底部不能填充，填充将导致滚动。如果您需要填充顶部，请设置为子元素，如UL。

Answer 5

一个很晚的回复，以上都没有帮助我。我有一个有效的解决方案，可以帮助别人。使用flex和view-port for min-height有助于将侧边栏覆盖到整个页面。

此代码假定顶部高度为51px;

.user-content {
  display: flex;
 }

.user-content .side-bar-content {
    flex      : 1;
    flex      : 0 0 220px;
    background: #f1f1f1;
    min-height: calc(100vh - 51px);
    //min-height: 100vh; // without topbar
  }

 .user-content .app-user {
    flex   : 2;
    padding: 0 0 15px 15px;
  }

Answer 6

您不能浮动绝对定位的元素。不要忘记将body和html节点的高度设置为100％，并在body元素上使用填充以避免重叠。

body, html {
    height: 100%;
}
body {
    padding-left: 200px;
}

使侧边栏整页高度

6 个答案: