3柱採用div和css

我想創建在asp.net頁面，我需要的頁面分成3列頁面佈局的各個不同的充寬度（20％，60％，20％），每列的高度應延伸到最大頁面高度。
我不想使用position:absolute和使用左，上屬性來定位div標籤，因爲有些人說，使用position:absolute是不好的，它會創造超過其他瀏覽器的問題。請在這方面向我提供幫助，對此有不同的解決方案。 :)3柱採用div和css

來源

2014-03-27 krishna

你試圖去創造你的自我？ – SpiderCode

下面是HTML

<div class="width20"> 
    Div with width 20% 
</div> 
<div class="width60"> 
    Div with width 60% 
</div> 
<div class="width20"> 
    Div with width 20% 
</div>

這裏是CSS

body { 
    margin:0; 
    padding:0; 
} 
.width20 { 
    float:left; 
    width:20%; 
    background:grey; 
    height:100vh; 
} 
.width60 { 
    float:left; 
    width:60%; 
    background:orange; 
    height:100vh; 
}

Example

來源

2014-03-27 06:43:39 Rohit

--->ü說高度：100vh;但它表示「100vh」不是高度屬性的有效值。 – krishna

嗨，你能澄清一下嗎？如果你點擊示例中的CSS代碼的鏈接下方滿足你的要求，因爲..也請查看到[鏈接]（http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window ）...即使你有一些問題，請分享，我會很樂意幫助....謝謝 – Rohit

HTML

<div class="container"> 
    <div class="grid_1"> 
     <p>20%</p> 
    </div> 
    <div class="grid_2"> 
     <p>60%</p> 
    </div> 
    <div class="grid_1"> 
     <p>20%</p> 
    </div> 
    <div class="clear">&nbsp;</div> 
</div>

CSS

.container { 
    background-color: #333333; 

    width: 100%; 
} 

.grid_1{ 
    display: inline; 
    float: left; 
    width: 20%; 
    position: relative; 
} 

.grid_2{ 
    display: inline; 
    float: left; 
    width: 60%; 
    position: relative; 
} 

p { 
    border: 1px solid #333333; 
    padding: 10px; 
    background-color: #FFFFFF; 
} 

.clear { 
    clear: both; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
}

fiddle

來源

2014-03-27 06:40:54 Evgeniy

什麼高度，我想高度填滿整個頁面。 plz幫助。 – krishna

+ HTML，身體，.container，.grid_1，.grid_2 {高度：100％} – Evgeniy

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style> 
     html,body{ 
      width: 100%; 
      height: 100%; 
      margin: 0%; 
     } 
     #one{ 
      width: 20%; 
      height: 100%; 
      float: left; 
      background-color: red; 
     } 
     #two{ 
      width: 60%; 
      height: 100%; 
      float: left; 
      background-color: green; 
     } 
     #three{ 
      width: 20%; 
      height: 100%; 
      float: left; 
      background-color: blue; 
     } 
    </style> 
</head> 
<body> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</body>

來源

2014-03-27 06:53:50

與浮動使用div標籤離開;它會幫助你。

HTML

<div class="first"></div> 
<div class="second"></div> 
<div class="third"></div>

CSS

body{ 
    height:100%; 
    min-height:100%; 
    width:100%; 
    position:absolute; 
} 
.first{ 
    background-color:red; 
    width:20%; 
    height:100%; 
    float:left; 
    position:relative; 
} 
.second{ 
    background-color:yellow; 
    width:60%; 
    height:100%; 
    float:left; 
    position:relative; 
} 
.third{ 
    background-color:green; 
    width:20%; 
    height:100%; 
    float:left; 
    position:relative; 
}

DEMO CODE

來源

2014-03-27 06:55:35

你可以使用這樣的事情：JSFiddle

HTML

<div id="content"> 
    <div class="side-bar">Content</div> 
    <div class="main-content">main Content</div> 
    <div class="side-bar">Content</div> 
</div>

CSS：

#content { 
    width:100% height:100%; 
    position:relative; 
    display:table; 
} 
.main-content { 
    background:#ccc; 
    height:100%; 
    width:60%; 
    display:table-cell; 
} 
.side-bar { 
    width:20%; 
    background:#eee; 
    height:100%; 
    vertical-align:top; 
    display:table-cell; 
}

希望這有助於

來源

2014-03-27 08:01:19

3柱採用div和css

回答

相關問題