DIV内DIV内部DIV 100％高度

我知道这个问题可能以前已经问过，我已经尝试了几种不同的方式来做到这一点，但我似乎无法让我的内部DIV扩展到视口的整个高度。DIV内DIV内部DIV 100％高度

这里是我的CSS：

html, body {margin: 0 auto; padding: 0; height: auto !important; min-height: 100%; height: 100%;} 

p, h1 {font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;text-align:left;margin:1em 0} 

/******************************************************************************* 
Primary Container Structure 
********************************************************************************/ 
#container {width: 100%; margin: 0px 0px; background-color: #fff; color: #333;} 

#top {padding: .5em; background-color: #3b5998; color:White;} 
#top h1 {padding: 0; margin: 0;} 

#subcontainer {width: 90%; margin: 0px auto; line-height: 130%;} 

#rightnav {height:100%; float: right; width: 244px; margin: 0; padding: 1em; max-width:244px;} 
#content {height:100%; border-left: 1px solid gray; margin-right: 284px; border-right: 1px solid gray; padding: 1em;} 

#leftnav p, #rightnav p {margin: 0 0 1em 0;} 
#content h2 {margin: 0 0 .5em 0;} 

#footer {clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}

这里是我的HTML：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SHELL.aspx.cs" Inherits="SHELL" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <link rel="stylesheet" type="text/css" href="css/base.css"> 

</head> 
<body> 
<form id="form1" runat="server"> 
<div id="container"> 

    <div id="top"> 
     <h1>NAME</h1> 
    </div> 
    <div id="subcontainer"> 



     <div id="rightnav"> 
      <p> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. 
      </p> 
     </div> 

     <div id="content"> 
      <h2>Subheading</h2> 
      <p> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </p> 
      <p> 
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p> 
     </div> 


    </div> 
    <div id="footer"> 
     Footer 
    </div> 

</div> 
</form> 
</body> 
</html>

来源

2011-01-24 WildBill

你的意思是id =“content”div不会扩展到浏览器的高度，因此页脚位于浏览器底部？ – 2011-01-24 21:57:01

你不能有一个中间容器，先计算出一个页脚高度，然后减去它从它的100％高度父容器。

你只是与你当前的标记选项有：

使用JavaScript（unncessary开销）
使用表（可能不是一个好主意）
这里是我有一个选项重新安排你的代码：Code Here

我做你的身高和页脚的工作，但它会要求你使用faux columns，对于底部坚持页脚的常用技术。一个例子见this。

简单地说，分配一个左边框图像在body上重复y，右边框图像在subcontainer上重复-y，background right。

来源

2011-04-05 23:13:17 Xacto01

DIV内DIV内部DIV 100％高度

回答

相关问题