我正在尝试使用CSS flexbox属性创建流动布局。
我试图设计一个三列流动布局,但我的尝试似乎不太准确。样式表如下所示。
一些背景信息: 我正在c# ASP.NET中进行设计。因此,我的HTML中有一些代码,使得拥有带有主布局的可变内容变得容易(对我来说)。基本上,只有在菜单点击时内容会改变,而网站其他部分则保持不变。
问题在于:如果页面内容较少,它将无法保持所需宽度。带有aside标签的div会尽可能地向左推。此外,页眉和页脚的高度似乎没有占据屏幕15%的尺寸。
请问需要哪方面的指导?
提前感谢。
一些背景信息: 我正在c# ASP.NET中进行设计。因此,我的HTML中有一些代码,使得拥有带有主布局的可变内容变得容易(对我来说)。基本上,只有在菜单点击时内容会改变,而网站其他部分则保持不变。
.MainContainer{
display: flex;
flex-direction: column;
border-style: solid; /*Debugging purposes*/
}
.ContentContainer{
width: 100%;
fill:aliceblue;
display: flex;
flex-direction: row;
border-style: solid; /*Debugging purposes*/
}
.header{
width: 100%;
height: 15%;
text-align: center;
border-style: solid; /*Debugging purposes*/
}
.footer{
width: 100%;
height: 15%;
text-align: center;
border-style: solid; /*Debugging purposes*/
}
.navbar{
display: flex;
width: 15%;
align-self: stretch;
align-items: center;
flex-direction: column;
padding:2px;
margin: 10px;
min-width: 15%;
border-style: solid; /*Debugging purposes*/
}
.content{
display: flex;
align-self: stretch;
width: 95%;
padding:10px;
margin: 10px;
text-align: justify;
min-width: 90%;
overflow:hidden;
border-style: solid; /*Debugging purposes*/
}
.aside{
display: flex;
width: 15%;
align-self: stretch;
align-items: center;
flex-direction: column;
margin: 10px;
padding: 10px;
min-width: 15%;
border-style: solid; /*Debugging purposes*/
}
HTML编码:
<div class="header">This is the Header space</div>
<div class="ContentContainer">
<nav class="navbar">
<a href="Home.aspx">Home</a>
<a href="About.aspx">About</a>
<a href="Contact.aspx">Contact</a>
</nav>
<%-- start of variable content--%>
<form id="form1" runat="server">
<div class="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<%-- end of variable content--%>
<div class="aside">Content Area for Latest items.</div>
</div>
<div class="footer">Tis is the Footer space</div>
问题在于:如果页面内容较少,它将无法保持所需宽度。带有aside标签的div会尽可能地向左推。此外,页眉和页脚的高度似乎没有占据屏幕15%的尺寸。
请问需要哪方面的指导?
提前感谢。