堆棧內存溢出
  簡體   English   中英

3行CSS div設計

[英]3 row CSS div design

 原文  2012-11-23 07:46:49  3   10    css/ html

問題描述

我想在行設計中制作3個div。 頁眉和頁腳具有固定高度的位置。 中心div擴展以填補空白空間。 我試過但最接近的是下面的代碼。 仍然有中心div的問題，擴大了頁腳div。

HTML： 

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

CSS： 

#rowOne {
    width: 100%;
    height: 50px;
    background: green;
}
#rowTwo {
    width: 100%;
    background: limegreen;
    height:100%;
    overflow:hidden;
}
#rowThree {
    width: 100%;
    position: fixed;
    clear: both;
    background: green;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
}
#container {
    height: 100%;
}

在此輸入圖像描述

10 個解決方案

解決方案1
 2 已采納  2013-04-06 12:10:56

三排純CSS

我知道這篇文章有點過時了，但盡管有相反的說法，你可以用CSS簡單地做到這一點。 不需要JavaScript，jQuery，CSS 3 hacks等。

這里有幾個顯示固定頁眉和頁腳以及動態主體div的jsf。

這第一個顯示固定的像素高度的頁眉和頁腳和動感的車身完全按照你在你想要的形象

http://jsfiddle.net/LBQ7K/ 

<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>

html, body, {
height: 100%;
}

.header {
position:   absolute;
top:    0px;
height:     50px;
width:      100%;
background: #f00;
}

.footer {
position:   absolute;
bottom: 0;
height:     50px;
width:      100%;
background: #00f;
}

.cssBody {
position:   absolute;
top:    50px;
bottom: 50px;
width:  100%;
background: #0f0;
}

第二個顯示您可以使用相同的技術來獲得動態頁眉和頁腳。 http://jsfiddle.net/reqXJ/ 

    <body>
    <div class="header"><p>Header</p></div>
    <div class="cssBody"><p>Hello World</p></div>
    <div class="footer"><p>Footer</p></div>
</body>

html, body, {
    height: 100%;
}

.header {
    position:   absolute;
    top:        0px;
    height:     15%;
    width:      100%;
    background: #f00;
}

.footer {
    position:   absolute;
    bottom:     0;
    height:     15%;
    width:      100%;
    background: #00f;
}

.cssBody {
    position:   absolute;
    top:        15%;
    bottom:     15%;
    width:      100%;
    background: #0f0;
}

解決方案2
 1  2012-11-23 07:51:53

這是一個非常常見的問題，對我有用的解決方案之一來自以下網站：

http://ryanfait.com/sticky-footer/

用代碼：

http://ryanfait.com/sticky-footer/layout.css

另一個受歡迎的選擇：

http://www.cssstickyfooter.com/

如果這不符合您的需求，請告訴我們，我們可以提供更多幫助。

解決方案3
 1  2012-11-23 08:16:57

好像你試圖做一個粘性頁腳，好吧......你需要一些黑客：

HTML： 

<div id='container'>
   <div class="header">
      <h1>Sticky Footer!</h1>
   </div>
   <div id='rowOne'>row 1</div>
   <div id='rowTwo'>row 2</div>
   <div id='rowThree'>row 3</div>
   <div class="push"></div>
</div>
<div id='footer'></div>

CSS 

.container {
   min-height: 100%;
   height: auto !important;height: 100%; 
   /* the bottom margin is the negative value of the footer's height */
   margin: 0 auto -142px;
}
.footer, .push{
   height: 142px; /* .push must be the same height as .footer */
}

注意：更換頁腳並將高度推到固定高度，並且不要忘記在容器中的行之后插入push div。

解決方案4
 0  2012-11-23 07:52:48

你可以通過絕對定位行來偽造它，並為中間行添加填充到頂部和底部。 你不能像使用表那樣做 

#container { position:relative; height:800px } // needs height

#rowOne, #rowTwo, #rowThree { position:absolute }

#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }

#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px

解決方案5
 0  2012-11-23 08:02:06

這行代碼能幫忙嗎？ DEMO

嘗試這個： 

#container{
   ...
   position:relative;
}
#content{
   min-height: xxx;
}

解決方案6
 0  2012-11-23 08:12:43

這應該完全符合你的要求：

HTML代碼： 

<div id="header">
    header
</div>
<div id='container'>
    <div id='rowOne'>one</div>
    <div id='rowTwo'>two</div>
    <div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
    footer
</div>

CSS代碼： 

.clearfix {
    clear: both;
}
#header, #footer {
    background-color: red;
}
#container {
    width: 100%;
}
#rowOne {
    width: 25%;
    background: green;
    float: left;
} 
#rowTwo {
    width: 55%;
    height: 100px;
    background: limegreen;
    float: left;
}
#rowThree {
    width: 20%;
    background: green;
    float: left;
}​

你也可以在jsFiddle上測試它

解決方案7
 0  2012-11-23 09:06:59

您是否嘗試過查看CSS框架？ 它們帶有默認類，您可以在短短幾分鍾內設置類似的東西。 它們還有助於生成更清晰的html和界面，您可以在以后輕松重新設計。

http://twitter.github.com/bootstrap/index.html

解決方案8
 0  2012-11-23 09:45:06

我希望你看起來像這樣： - DEMO

CSS 

#container {
    height: 100%;
}

#rowOne {
    height: 50px;
    background: green;
    position:fixed;
    left:0;
    right:0;
}
#rowTwo {
    background: limegreen;
    min-height:500px;
    position:absolute;
    left:0;
    right:0;
    top:50px;
}
#rowThree {
    position: fixed;
    background: green;
    bottom:0;
    left:0;
    right:0;
    height:50px;
}

HTML 

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

解決方案9
 0  2012-11-23 09:59:45

一種方法是使用Jquery將中間div的最小高度設置為屏幕的高度，減去其他兩個div（100px）的高度，這樣的東西應該工作： 

$(document).ready(function() {

    var screenHeight = $(document).height() - 100px;

    $('#rowTwo').css('min-height' , screenHeight);

});

解決方案10
 0  2012-11-29 02:47:07

回應您對jedrus07的回答的評論：

所有這些解決方案擴展了頁腳div后面的中心div。 我想要一個解決方案，每個div只有自己的空間。

唯一的方法是使用CSS 3 calc（）。 如果您不需要支持很多瀏覽器，那么這是一個選項，以下是它的實際演示：

http://jsfiddle.net/5QGgZ/3/

（使用Chrome或Safari。）

HTML： 

<html>
  <body>
    <div id='container'>
      <div id='rowOne'>row 1</div>
      <div id='rowTwo'>row 2</div>
      <div id='rowThree'>row 3</div>
    </div>
  </body>
</html>

CSS： 

html, body, #container {
  height: 100%;
}
#rowOne {
  height: 50px;
  background: #f00;
}
#rowTwo {
  height: -webkit-calc(100% - 100px);
  background: #0f0;
}
#rowThree {
  height: 50px;
  background: #00f;
}

如果你想要更廣泛的瀏覽器支持，你將不得不采用像jedrus07提到的粘性頁腳解決方案，或Tom Sarduy的答案。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS div響應式設計 響應式設計中的CSS Div覆蓋 需要輸入 css 來設計一個 div 在div中連續填充div（css） 在CSS中顯示和隱藏div行 在CSS中將Div行轉換為列 像div這樣的新聞提要的CSS和html設計 HTML CSS設計：div的大小不斷增加 越來越多的html div CSS設計模板。 CSS div設計nth-child
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM