這是事情,div沒有完全伸展到頁面的其餘部分。 使用高度/最小高度:100%;的事情,但沒有工作css高度〜最小高度:100%不工作
下面是aspx頁面代碼
<div class="wrapper">
<div class="divHeader">
<div class="divContainer">
<div class="divContentLeft">
<a href="Dashboard.aspx"><img src="../images/logo.png" /></a>
</div>
<div class="divContentLeft">
<div class="divContentRow"></div>
<div class="divContentRow"></div>
<div class="divContentRow">
<div class="divContentLeft">
<a href="Dashboard.aspx"><span>Some Title Here</span></a>
</div>
</div>
<div class="divContentRow">
<div class="divContentLeft">
<a href="#"><img src="../images/menu_icon.png" height="20px" width="20px" onclick="" /></a>
</div>
</div>
</div>
</div>
</div>
<div class="divBody">
<div class="divContentLeft" style="min-height:100%; height:100%;">
<div class="menu-bar">
<ul class="menu-bar-ul" runat="server" id="divMenuBar">
</ul>
</div>
</div>
<div class="divContentLeft">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="divFooter">
</div>
</div>
而CSS
body {
font-family: Helvetica, Arial, sans-serif;
}
.divHeader a {
text-decoration:none;
color:#000;
font-weight:800;
}
.wrapper {
padding:0;
margin:0 auto;
min-height:100%;
height:100%;
width:100%;
}
.divHeader, .divBody, .divFooter {
padding:5px;
}
.divHeader {
height:15%;
clear:both;
display:block;
background-color:#CFCFC4;
width:100%;
border-bottom: 1px dotted gray;
}
.divBody {
height:80%;
width:100%;
display:block;
padding:0;
margin:0 auto;
clear:both;
min-height:80%;
height:auto;
}
.divFooter {
height:5%;
width:100%;
display:block;
margin:0 auto;
padding:0;
clear:both;
}
.divContentLeft {
margin:0 auto;
float:left;
display:inline-block;
position:relative;
}
.divContainer {
clear:both;
display:inline-block;
}
.divContentRow {
width:100%;
display:inline-block;
}
.divContentHeader {
width:100%;
height:20%;
border-radius:25px;
display:inline-block;
margin:10px;
padding:5px;
}
.divContentDetail {
width:100%;
height:80%;
border-radius:25px;
display:inline-block;
margin:10px;
padding:5px;
}
.ui-widget-header {
background:#b39eb5;
}
.divContentTextbox {
float:left;
margin-left:15px;
display:inline-block;
}
.divContentLabel {
float:left;
margin-left:15px;
}
* {
padding: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.divMenuBarBlock {
float:left;
width:100%;
height:100%;
}
.menu-bar {
float:left;
min-height:100%;
width:100%;
height:100%;
background: #CFCFC4;
}
.menu-bar a{
display:block;
padding: 10px 10px 10px 10px;
text-decoration:none;
border-bottom: 1px dotted gray;
color: #000;
letter-spacing: .002em;
text-transform: uppercase;
font-family:Helvetica, Arial, sans-serif;
font-style:normal;
font-size:medium;
}
.menu-bar li{
list-style:none;
}
.menu-bar ul li ul li:hover {
background:gray;
}
.menu-bar-ul ul {
display:none;
}
.no-sub:hover {
background:gray;
}
.sub-arrow {
margin-left:15px;
}
.menu-bar-ul li.click ul {
display:block;
}
.menu-bar .sub-arrow:after {
content:'\203A';
float:right;
margin-right:10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
.menu-bar li.click .sub-arrow:after {
content: '\2039';
}
.menu-bar-ul ul a:before {
content:'\203A';
margin-right:10px;
}
所以,主要的問題是我如何拉伸再用股利剩餘頁面的其餘部分?
因爲我的導航菜單欄伸展只要唯一顯示的項目有 也內容不被拉伸到頁面
問候其餘
http://stackoverflow.com/help/mcve – Rob
試試這個html,body { height:100%; } – Amal
好像問題是div身體不換它的孩子 ,因爲我不能讓上螢火 –