如何用文本 100% 高度填充横向 div？ (Bootstrap)
How to fill a lateral div with text 100% height? (Bootstrap)
我想用颜色填充横向 div 并且它占据页面高度的 100%。我也在使用下拉菜单，我认为这是问题所在，但我不确定。
我想向您展示它的外观：
| DIV 带图片 | ---------------------------------------- Div 有一些正文 ---------------------------------- |
|图片 |下拉菜单 1 | DD 菜单 2 | DD 菜单 3|---------------- | Div 我想要 100% 的身高 |
| - - - - - - - - - - - - - - - - - - - 内容 - - - - - - --------------------------| ------ Div 继续 ↑ ---------- |
| - - - - - - - - - - - - - - - - - - - 内容 - - - - - - --------------------------| ------ Div 继续 ↑ ---------- |
| - - - - - - - - - - - - - - - - - - - 内容 - - - - - - --------------------------| ------ Div 继续 ↑ ---------- |
依此类推，视内容而定
这是问题的屏幕截图。
http://postimg.org/image/9r9mgg3yf/
那个绿色 div 是我想用 100% 的高度（红色圆圈）显示的那个，如果可能的话，继续显示文本或者在上面放一张图片，但我真的希望它占100％。如您所见，它还在不应该放置垂直滚动条的时候放置了它。
感谢您的帮助。这是代码：
$(this.document).ready(function () {
$('ul#ul1 li ul').hide();
$('ul#ul1 li').hover(
function () {
$('ul#ul1 li').not($('ul', this)).stop();
$('ul', this).slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
}
);
});
html, body {
height:100%;
text-align:center;
}
#one
{
background:white;
width:30%;
height:10%;
float:left;
}
#two
{
background:green;
width:70%;
height:10%;
color:white;
font-size:19pt;
text-align:center;
float:right;
}
#three
{
background:#FF6600;
width:10%;
height:200%;
float:right;
color:white;
font-size:16pt;
}
#four
{
background:gray;
width:90%;
height:10%;
float:left;
font-size:18px;
color:white;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#form1 {
text-align: center;
}
ul#ul1, ul#ul1 ul {
list-style: none;
padding: 5px;
}
ul#ul1 li {
display: block;
float: left;
margin:0;
padding: 5px 20px 15px 20px;
position: relative;
line-height: 18px;
top: 0px;
left: 0px;
width: 119px;
height: 13px;
}
ul#ul1 li a {
color: #FAFAFA;
text-decoration: none;
}
ul#ul1 a:hover{
color:#fff;
}
ul#ul1 li ul {
background: #E1E1E1;
border-bottom: solid 2px #C1C1C1;
border-top: solid 2px #D1D1D1;
border-left: solid 1px #D1D1D1;
border-right: solid 1px #D1D1D1;
margin: 12px 0 0 0;
padding: 0 10px 0;
width: 130px;
position: absolute;
}
ul#ul1 li ul li {
border-bottom: 1px solid #C1C1C1;
display: block;
float: none;
height: 14px;
padding: 18px 0;
text-align: center;
margin: 0;
width: 130px;
background: none;
}
ul#ul1 li ul li.last {
border-bottom: none;
}
ul#ul1 li ul li a {
color: #313131;
}
ul#ul1 li ul li a:hover {
color: #000;
}
ul#ul1 li ul li:last-child:not(li.arrow){
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formMinutasAdm" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="True"></asp:ToolkitScriptManager>
<div id="one">
<center>
<img alt="Image" src="Resources/Image.png" width="60%" style="height: 90px" />
</center>
</div>
<div id="two">
<br />
Some text
<br />
<br />
</div>
<div id="three">
<br />
<track> T<br />
e<br />
x<br />
t<br />
<br />
0
<br />
<br />
<br />
<center> 1<br /> T<br /> e<br /> x<br /> </center>
<br />
<br />
<br />
<center> T<br /> e<br /> x<br />
t<br /> 0<br /> 1 </center>
</track>
<br />
</div>
<div id="four">
<ul id="ul1">
<li><a href="#">
<img alt="DDSW" src="Resources/ddsw.png" style="width: 22%; height: 19px; position: relative; padding: 0px 0px 0px 0px; top: 0px; left: 0px;" /></a></li>
<li class="last"><a href="#">Menu1</a>
<ul>
<li><a id="btnAccess" href="#1">
<asp:Button ID="btnAccess" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Create" Style="text-align: left" OnClick="btnAccess_Click" TabIndex="30" UseSubmitBehavior="False" />
</a></li>
<li><a href="#2">
<asp:Button ID="btnAccessModify" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Modify" Style="text-align: left" OnClick="btnAccessModify_Click" TabIndex="31" UseSubmitBehavior="False" />
</a></li>
<li <%= this.btnDelete %>><a href="#2">
<asp:Button ID="btnAccessDelete" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Delete" Style="text-align: left" OnClick="btnAccessDelete_Click" TabIndex="32" UseSubmitBehavior="False" />
</a></li>
<li class="last"><a href="#3">
<asp:Button ID="btnAccessQuery" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Query" Style="text-align: left" TabIndex="33" OnClick="btnAccessQuery_Click" />
<asp:ModalPopupExtender ID="PopUpQuery" runat="server" BackgroundCssClass="modalBackground" Enabled="True" PopupControlID="PanelPopUpQuery" TargetControlID="Button4">
</asp:ModalPopupExtender>
</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#4">
<asp:Button ID="btnAccessGetReport" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Get Report" Style="text-align: left" TabIndex="34" UseSubmitBehavior="False" OnClick="btnAccessGetReport_Click" />
</a></li>
<li><a href="#5">
<asp:Button ID="btnAccessGenerateReport" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Generate Report" Style="text-align: left" TabIndex="35" UseSubmitBehavior="False" OnClick="btnAccessGenerateReport_Click" />
</a></li>
<li class="last"><a href="#6">
<asp:Button ID="btnAccessHistory" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="History" Style="text-align: left" TabIndex="36" UseSubmitBehavior="False" OnClick="btnAccessHistory_Click" />
</a></li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="#7">
<asp:Button ID="btnAccessInformation" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Información" Style="text-align: left" TabIndex="37" UseSubmitBehavior="False" OnClick="btnAccessInformation_Click" />
</a></li>
<li class="last"><a href="#8">
<asp:Button ID="btnAccessSession" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Cerrar Sesión" Style="text-align: left" OnClick="btnAccessSession_Click" TabIndex="38" UseSubmitBehavior="False" />
</a></li>
</ul>
</li>
</ul>
</div>
</form>
好的，我想我明白你在问什么，但如果我错过了，请告诉我。
您已将高度设置为 100%，但 100% 是什么？它始终是该元素的父元素，那么父元素的高度设置为多少？如果它没有设置任何内容，那么浏览器就没有任何参考。
所以我对它进行了绝对定位 - 它现在将采用浏览器高度并据此进行计算。
&如果你不想让它在下面显示白色space，这是你放在那里的额外内容，你需要把overflow:hidden放在包含元素上。
Js Fiddle: https://jsfiddle.net/zspj4q99/3/
这是我更改的代码：
#three{
background:#FF6600;
width:10%;
height:100%;
color:white;
font-size:16pt;
position:absolute;
right:8px;
top:95px;
overflow:hidden;
}
我想用颜色填充横向 div 并且它占据页面高度的 100%。我也在使用下拉菜单，我认为这是问题所在，但我不确定。
我想向您展示它的外观：
| DIV 带图片 | ---------------------------------------- Div 有一些正文 ---------------------------------- |
|图片 |下拉菜单 1 | DD 菜单 2 | DD 菜单 3|---------------- | Div 我想要 100% 的身高 |
| - - - - - - - - - - - - - - - - - - - 内容 - - - - - - --------------------------| ------ Div 继续 ↑ ---------- |
| - - - - - - - - - - - - - - - - - - - 内容 - - - - - - --------------------------| ------ Div 继续 ↑ ---------- |
| - - - - - - - - - - - - - - - - - - - 内容 - - - - - - --------------------------| ------ Div 继续 ↑ ---------- |
依此类推，视内容而定
这是问题的屏幕截图。 http://postimg.org/image/9r9mgg3yf/
那个绿色 div 是我想用 100% 的高度（红色圆圈）显示的那个，如果可能的话，继续显示文本或者在上面放一张图片，但我真的希望它占100％。如您所见，它还在不应该放置垂直滚动条的时候放置了它。
感谢您的帮助。这是代码：
$(this.document).ready(function () {
$('ul#ul1 li ul').hide();
$('ul#ul1 li').hover(
function () {
$('ul#ul1 li').not($('ul', this)).stop();
$('ul', this).slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
}
);
});
html, body {
height:100%;
text-align:center;
}
#one
{
background:white;
width:30%;
height:10%;
float:left;
}
#two
{
background:green;
width:70%;
height:10%;
color:white;
font-size:19pt;
text-align:center;
float:right;
}
#three
{
background:#FF6600;
width:10%;
height:200%;
float:right;
color:white;
font-size:16pt;
}
#four
{
background:gray;
width:90%;
height:10%;
float:left;
font-size:18px;
color:white;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#form1 {
text-align: center;
}
ul#ul1, ul#ul1 ul {
list-style: none;
padding: 5px;
}
ul#ul1 li {
display: block;
float: left;
margin:0;
padding: 5px 20px 15px 20px;
position: relative;
line-height: 18px;
top: 0px;
left: 0px;
width: 119px;
height: 13px;
}
ul#ul1 li a {
color: #FAFAFA;
text-decoration: none;
}
ul#ul1 a:hover{
color:#fff;
}
ul#ul1 li ul {
background: #E1E1E1;
border-bottom: solid 2px #C1C1C1;
border-top: solid 2px #D1D1D1;
border-left: solid 1px #D1D1D1;
border-right: solid 1px #D1D1D1;
margin: 12px 0 0 0;
padding: 0 10px 0;
width: 130px;
position: absolute;
}
ul#ul1 li ul li {
border-bottom: 1px solid #C1C1C1;
display: block;
float: none;
height: 14px;
padding: 18px 0;
text-align: center;
margin: 0;
width: 130px;
background: none;
}
ul#ul1 li ul li.last {
border-bottom: none;
}
ul#ul1 li ul li a {
color: #313131;
}
ul#ul1 li ul li a:hover {
color: #000;
}
ul#ul1 li ul li:last-child:not(li.arrow){
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formMinutasAdm" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="True"></asp:ToolkitScriptManager>
<div id="one">
<center>
<img alt="Image" src="Resources/Image.png" width="60%" style="height: 90px" />
</center>
</div>
<div id="two">
<br />
Some text
<br />
<br />
</div>
<div id="three">
<br />
<track> T<br />
e<br />
x<br />
t<br />
<br />
0
<br />
<br />
<br />
<center> 1<br /> T<br /> e<br /> x<br /> </center>
<br />
<br />
<br />
<center> T<br /> e<br /> x<br />
t<br /> 0<br /> 1 </center>
</track>
<br />
</div>
<div id="four">
<ul id="ul1">
<li><a href="#">
<img alt="DDSW" src="Resources/ddsw.png" style="width: 22%; height: 19px; position: relative; padding: 0px 0px 0px 0px; top: 0px; left: 0px;" /></a></li>
<li class="last"><a href="#">Menu1</a>
<ul>
<li><a id="btnAccess" href="#1">
<asp:Button ID="btnAccess" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Create" Style="text-align: left" OnClick="btnAccess_Click" TabIndex="30" UseSubmitBehavior="False" />
</a></li>
<li><a href="#2">
<asp:Button ID="btnAccessModify" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Modify" Style="text-align: left" OnClick="btnAccessModify_Click" TabIndex="31" UseSubmitBehavior="False" />
</a></li>
<li <%= this.btnDelete %>><a href="#2">
<asp:Button ID="btnAccessDelete" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Delete" Style="text-align: left" OnClick="btnAccessDelete_Click" TabIndex="32" UseSubmitBehavior="False" />
</a></li>
<li class="last"><a href="#3">
<asp:Button ID="btnAccessQuery" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Query" Style="text-align: left" TabIndex="33" OnClick="btnAccessQuery_Click" />
<asp:ModalPopupExtender ID="PopUpQuery" runat="server" BackgroundCssClass="modalBackground" Enabled="True" PopupControlID="PanelPopUpQuery" TargetControlID="Button4">
</asp:ModalPopupExtender>
</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#4">
<asp:Button ID="btnAccessGetReport" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Get Report" Style="text-align: left" TabIndex="34" UseSubmitBehavior="False" OnClick="btnAccessGetReport_Click" />
</a></li>
<li><a href="#5">
<asp:Button ID="btnAccessGenerateReport" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Generate Report" Style="text-align: left" TabIndex="35" UseSubmitBehavior="False" OnClick="btnAccessGenerateReport_Click" />
</a></li>
<li class="last"><a href="#6">
<asp:Button ID="btnAccessHistory" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="History" Style="text-align: left" TabIndex="36" UseSubmitBehavior="False" OnClick="btnAccessHistory_Click" />
</a></li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="#7">
<asp:Button ID="btnAccessInformation" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Información" Style="text-align: left" TabIndex="37" UseSubmitBehavior="False" OnClick="btnAccessInformation_Click" />
</a></li>
<li class="last"><a href="#8">
<asp:Button ID="btnAccessSession" runat="server" BackColor="#E1E1E1" BorderColor="#E1E1E1" Width="120px" BorderStyle="None" Height="25px" Font-Size="15.5px" Text="Cerrar Sesión" Style="text-align: left" OnClick="btnAccessSession_Click" TabIndex="38" UseSubmitBehavior="False" />
</a></li>
</ul>
</li>
</ul>
</div>
</form>
好的，我想我明白你在问什么，但如果我错过了，请告诉我。
您已将高度设置为 100%，但 100% 是什么？它始终是该元素的父元素，那么父元素的高度设置为多少？如果它没有设置任何内容，那么浏览器就没有任何参考。
所以我对它进行了绝对定位 - 它现在将采用浏览器高度并据此进行计算。
&如果你不想让它在下面显示白色space，这是你放在那里的额外内容，你需要把overflow:hidden放在包含元素上。
Js Fiddle: https://jsfiddle.net/zspj4q99/3/
这是我更改的代码：
#three{
background:#FF6600;
width:10%;
height:100%;
color:white;
font-size:16pt;
position:absolute;
right:8px;
top:95px;
overflow:hidden;
}