Question

我想要的是一个侧栏，它一直向下延伸到页面的底部，我设置了高度：100％，但这不起作用......有人可以给我一些建议。< / p>

#leftBar是左侧列，我想向下延伸到页面底部。

HTML：

   <%@ Page Title="" Language="C#" MasterPageFile="~/Template2.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Template2.index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">


</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div id="leftBar">
<div id="contentOne">


<p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
<hr style="border:1px solid Gray; width:150px;" />
<p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>


</div>

</asp:Content>

的CSS：

body 
{ 
    margin:0px;
    padding:0px;
    background-image:url('/img/pattern.jpg');
    height:100%;


}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

#header {

   background-image:url('/img/header_img.png');
   padding:10px;
   height:100px;
}

#title
{
    color:White;
    font-size:18px;

   overflow: auto;
  display: block;
  width: 550px;
  margin: 0 auto;  
  position:relative;

}


.navigation {
  background: url(images/navigation.png);
  height: 134px;
  overflow: auto;
  display: block;
  width: 550px;
  margin: 0 auto;  
}
.navigation * {
  padding:0;
  margin:0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}
.navigation ul {
  display: block;
  float: left;
  padding: 0px 0 0 0;
  margin: 37px 0 0 20px;
}
.navigation ul li 
{

  background-color:White;
  list-style: none;
  float: left;
  margin: 0 0 0 5px;
  border-radius: 10px;
}

.navigation ul li a {
  background-image:url(img/navbutton_back.png);
  display: block;
  padding: 0 13px 0 0;
  color: #578ba0;
  text-decoration: none
}
.navigation ul li.selected a,
.navigation ul li.hover a {
  background-image:url(img/navbutton_back.png);
  color: #578ba0;
}

.navigation ul li a span {
  background-image:url(img/navbutton_back.png);
  display: block;
  padding: 15px 10px 10px 23px;
}
.navigation ul li.selected a span,
.navigation ul li.hover a span {
  background-image:url(img/navbutton_back.png);
}

#contentOne
{
    margin-top:20px;
    margin-left:80px;    
    height:200px;
    width:200px;   
    border-top-left-radius:10px;
    border-top-right-radius:10px;


}

#leftBar
{
    position:relative;
    height:100%;
    width:200px;
    background-color:White;
    margin:0px;
    padding:0px;
    margin-top:-20px;
    background-image:url('/img/header_img.png');

}

Answer 1

同时将<html>和<body>设置为100%，并将display: block添加到侧边栏。

html, body {
    height: 100%;
}

在此处查看一个简单示例：http://jsfiddle.net/Nhdvx/

无论分辨率如何，都可以将div一直延伸到底部

1 个答案: