如何使一個div拉伸其高度的其他兩個div之間和中心的內容

我想使一個列布局與3部分如何使一個div拉伸其高度的其他兩個div之間和中心的內容

第1節：擡頭第2部分：從beneth所述stretchs內容區段頁眉到頁腳的開頭，它的內容在垂直和水平方向居中居中itsel 第3部分：頁腳始終駐留在瀏覽器窗口的底部。

問題：

我不能獲取內容的div STRETCH時到頁腳/ DIV底部的開始。如果我輸入高度：100％，它會自動延伸到整個頁面的末尾。

也想在這個中間div內垂直和水平居中 - 雖然我還沒有試圖這樣做。

也不明白爲什麼標題文本的背景不是顏色。即使sub header divs是由定義了背景色的header div封裝的。

謝謝！

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

html { 
    height: 100%; 

} 

body { 

    height: 100%; 
    margin-left: 20px; 
    margin-top:0px; 
    margin-bottom: 0px; 


} 

#containerHeaderContent { 
    min-height:100%; 
    height: auto; 
    height: 100%; 
    margin: 0 auto -1.5em; 
} 

.push { 
height: 1em; 
} 

.header { 
    background-color: aqua; 
    padding-top:20px; 
    } 


.subheader-left { 

    float:left; 
    font-family: serif; 
    font-size: 20px; 
    text-align: left; 
} 


.subheader-right{ 

    float: right; 
    font-family: sans-serif; 
    font-size: 12px; 
    padding-right: 20px;} 

.middleSection { 
    padding-top: 10px; 
    clear:both; 
    width:100%; 
    height auto; 
    background-color: #e8e7e7; 

} 


.bottom{ 
background-color: red; 
position: absolut; 
height: 1em; 
font-size: small; 

} 
.bottom-left { 

    float: left; 
    font: sans-serif; 
    left: 20px; 
} 


.bottom-right { 

    float:  right; 
    right:  15px; 
    font-style: italic; 
    color:  #8e8e8e; 
    font-size: 11px; 
} 

</style> 

<title>XYZ</title> 

</head> 
<body> 

<div id="containerHeaderContent"> 

    <div class="header"> 
     <div class="subheader-left">XYZ</div> 
     <div class="subheader-right">LOREM</div> 
    </div> 

<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div> 

<div class="push"></div> 

</div> 

<div class="bottom"> 
    <div class="bottom-left"> 
     <span class="about"> 
      <span class="bold">XYZ</span> is a project by XZY.&nbsp;&nbsp;&#124;&nbsp; 
      <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


     </span> 
</div> 


<div class="bottom-right"> 
    <span class="openinghours">Open by Appointment</span><span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sponsored by XYZ</span> 
</div> 
</div> 

</body> 
</html><!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 

</body> 
</html>

來源

2012-08-14 Roland

無需使用表格！一些簡單的CSS將很好地做。

DEMO：http://jsbin.com/azivip/2/edit

HTML標記：

<body> 
    <div id="content"> 
    <div id="header"> 
     This is the header 
    </div> 
    <div id="inner"> 
     This is the body 
    </div> 
    <div id="footer"> 
     this is the footer 
    </div> 
    </div> 
</body>

CSS：

body{ 
    height:100%; 
    padding:0px; 
    margin:0px; 
} 
    #content{ 
     position:relative; 
     bottom:0px; 
     width:100%; 
     height:100%; 
    } 
     #header{ 
      position:relative; 
      bottom:0px; 
      width:100%; 
      height:100px; /* Edit for height of header*/ 
      background:#f00; 
     } 
     #inner{ 
      width:100%; 
      text-align:center; 
      position: absolute; 
      top: 50%; 
      display: table-cell; 
      vertical-align: middle; 
     } 
     #footer{ 
      position:absolute; 
      bottom:0px; 
      width:100%; 
      height:100px; /* Edit for height of footer */ 
      background:#0f0; 
     }

爲了#inner留垂直居中，甚至多線的內容，你需要使用Javascript/jQuery。下面是一個示例腳本，它「拉起」#inner恰到好處的數量。

var mrgntop = -Math.floor($("#inner").height()/2); 
$("#inner").css({"margin-top":mrgntop});

來源

2012-08-14 21:57:46

我想邁克爾的解決方案是好的，它只需要將頁腳更改爲固定？ – Stano 2012-08-14 22:59:04

它很整潔，我不知道爲什麼我沒有想到這個:)對於一個非「可控」解決方案。 – Chris 2012-08-14 23:04:02

非常好！謝謝！但有一個問題 - 中間部分的多行內容是否可以自動生成。以中心爲單位，上方：50％適用於單行文本，但不適用於圖片或多行文本。再次感謝！ – Roland 2012-08-14 23:15:48

<table>是你需要在這種情況下使用什麼。該HTML看起來像這樣，基本上是：

<table class = "wrapper"> 
    <tr><td class = "header">I'm the header.</td></tr> 
    <tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr> 
    <tr><td class = "footer">I'm the footer.</td></tr> 
</table>

範例CSS：

html, body, .wrapper { 
    height: 100%; 
} 
.header { 
    height: 100px; /*This value can be anything*/ 
} 
.content { 
    text-align: center; 
} 
.footer { 
    height: 100px; 
}

演示：jsFiddle。請注意內容的垂直和水平方向。

希望有幫助！

來源

2012-08-14 21:13:58 Chris

thx！但沒有辦法做到這一點與CSS？（抓頭） – Roland 2012-08-14 21:27:04

@Roland不幸的是，除非你也可以使用Javascript，否則我不認爲有一種方法可以使用純CSS。但我認爲這是沒有必要的 - 使用JavaScript比使用表，恕我直言，有更多的開銷和「成本」。 – Chris 2012-08-14 21:30:40

佈局表格 - 是或否？ http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Stano 2012-08-14 22:47:09

如何使一個div拉伸其高度的其他兩個div之間和中心的內容

回答

相關問題