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はブラウザの高さまで拡大しないので、フッターがブラウザの一番下にあることを意味しますか？ –

「内部div」は100％になりますか？＃コンテンツ？ – n8wrl

私はid = contentで画面を埋めるようにし、id = footerを画面の一番下まで押してください。 IEやFirefoxではこれをやっていません。 – WildBill

あなたが真ん中コンテナは最初、それは100％の高さの親コンテナですから、それを差し引いた後、フッターの高さを計算することはできません。

あなたの現在のマークアップを持つ唯一の選択肢だが、次のとおりです。

使用するJavaScript（unncessaryオーバーヘッド）ここで
使用テーブル（おそらくない良いアイデア）
私が持っていたオプションです。 Code Here

は、私はあなたの高さとフッターの仕事をしたが、それはあなたがfaux columns、下の粘着フッターのための一般的な手法を使用する必要があります：あなたのコードを並べ替えます。例については、thisを参照してください。

左のボーダー画像を本体でrepeat-yに割り当て、右のボーダー画像をサブコンテナのrepeat-y、background rightに割り当てます。

出典

2011-04-05 23:13:17 Xacto01

DIV内のDIV内部DIV 100％高さ

答えて

関連する問題