0
Я хотел бы заполнить боковой div цветом и что он занимает 100% высоты страницы. Я также использую раскрывающееся меню, и я думаю, что это проблема, но я не уверен.Как заполнить боковой div текстом 100% высоты? (Bootstrap)
Я хотел бы показать вам, как это должно выглядеть:
| DIV с изображением | ------------------------------------------- Div с некоторым текстом --- ---------------------------------- |
| Изображение | DropDown Menu 1 | DD Меню 2 | DD Menu 3 | ---------------- | Div Я хочу иметь 100% высоты |
| -------------------------------------- Содержание ----------- -------------------------- | ------- Div продолжается ↑ ----------- |
| -------------------------------------- Содержание ----------- -------------------------- | ------- Div продолжается ↑ ----------- |
| -------------------------------------- Содержание ----------- -------------------------- | ------- Div продолжается ↑ ----------- |
И так далее, в зависимости от содержания.
Вот скриншот проблемы. http://postimg.org/image/9r9mgg3yf/
Это зеленый ДИВ это один я хочу показать 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');
}
);
});\t \t \t html, body {
\t \t \t \t height:100%;
\t \t \t \t text-align:center;
\t \t \t }
\t \t \t #one
\t \t \t {
\t \t \t \t background:white;
\t \t \t \t width:30%;
\t \t \t \t height:10%;
\t \t \t \t float:left; \t \t \t \t
\t \t \t }
\t \t \t
\t \t \t #two
\t \t \t {
\t \t \t background:green;
\t \t \t width:70%;
\t \t \t height:10%;
\t \t \t color:white;
\t \t \t font-size:19pt;
\t \t \t text-align:center;
\t \t \t float:right;
\t \t \t }
\t \t \t #three
\t \t \t {
\t \t \t background:#FF6600;
\t \t \t width:10%;
\t \t \t height:200%;
\t \t \t float:right;
\t \t \t color:white;
\t \t \t font-size:16pt;
\t \t \t }
\t \t \t
\t \t \t #four
\t \t \t {
\t \t background:gray;
\t \t width:90%;
\t \t height:10%;
\t \t float:left;
font-size:18px;
\t \t color:white;
\t display: block;
\t -webkit-border-radius: 5px;
\t -moz-border-radius: 5px;
\t border-radius: 5px;
\t \t \t }
\t \t \t
\t \t \t #form1 {
text-align: center;
}
ul#ul1, ul#ul1 ul {
\t list-style: none;
\t padding: 5px;
}
ul#ul1 li {
\t display: block;
\t float: left;
\t margin:0;
\t padding: 5px 20px 15px 20px;
\t position: relative;
\t line-height: 18px;
top: 0px;
left: 0px;
width: 119px;
height: 13px;
}
ul#ul1 li a {
\t color: #FAFAFA;
\t text-decoration: none;
}
ul#ul1 a:hover{
\t color:#fff;
}
ul#ul1 li ul {
\t background: #E1E1E1;
\t border-bottom: solid 2px #C1C1C1;
\t border-top: solid 2px #D1D1D1;
\t border-left: solid 1px #D1D1D1;
\t border-right: solid 1px #D1D1D1;
\t margin: 12px 0 0 0;
\t padding: 0 10px 0;
\t width: 130px;
\t position: absolute;
}
ul#ul1 li ul li {
\t border-bottom: 1px solid #C1C1C1;
\t display: block;
\t float: none;
\t height: 14px;
\t padding: 18px 0;
\t text-align: center;
\t margin: 0;
\t width: 130px;
\t background: none;
}
ul#ul1 li ul li.last {
\t border-bottom: none;
}
ul#ul1 li ul li a {
\t color: #313131;
}
ul#ul1 li ul li a:hover {
\t color: #000;
}
ul#ul1 li ul li:last-child:not(li.arrow){
\t 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 T<br />
e<br />
x<br />
t<br />
<br />
0
<br />
<br />
<br />
<center> \t 1<br /> T<br /> e<br /> x<br /> </center>
<br />
<br />
<br />
<center> \t T<br /> e<br /> x<br />
\t \t \t 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>
\t </form>
Спасибо, он работал отлично! Основная проблема, с которой я столкнулся, - проверить родительский элемент для каждого div, и в соответствии с этим назначить процент размера. Спасибо за вашу помощь! –