这就是事情,div没有完全延伸到页面的其余部分。 使用高度/最小高度: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;
}
所以,主要的问题是我如何将这个疯狂的div扩展到其余页面的剩余部分?
因为我的导航菜单栏只会延伸到那里唯一显示的项目 内容也不会延伸到页面的其余部分
此致
答案 0 :(得分:2)
您可以使用vh
单位。 100vh
是视口高度的100%。这并不需要设置父母&#39;高度并且good support - 所有浏览器,即&gt; = 9。
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:100vh;
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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
.divBody {
height: 80%;
...
}
未被应用。我把它改成了
.divBody {
height: 80% !important;
...
并且包装器div似乎扩展了页面的整个高度。如果您愿意,还可以找出覆盖高度属性的内容。
Chrome有一个很棒的DevTools。只需右键单击Chrome中的某个页面,然后点击检查即可。当您将鼠标悬停在项目上时,会突出显示相应的容器。您可以更改选择器css并实时查看更改。