-1

我想要的是一个侧栏，它一直延伸到页面底部，我已经设置了高度：100%，但这不起作用……有人能给我一些建议吗？

#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');

}
4

1 回答 1

1

将<html>and设置<body>为100%also 并添加display: block到您的侧边栏。

html, body {
    height: 100%;
}

在这里查看一个简单的例子：http: //jsfiddle.net/Nhdvx/

于 2013-05-23T13:51:04.020 回答