布局问题-CSS
[英]Layout Issue - CSS
问题描述
HTML
<body>
<form id="form1" runat="server">
<div id="headers">
<header>
<div id="Logo">
<img alt="SiteLogo" src="Images/kas.png" style="width:130px;height: 55px;" />
</div>
<div id="LogoText">Camphor Works</div>
<nav>
<ul>
<li><a href="Index.aspx">HOME</a>
</li>
<li><a href="AboutUs.aspx">ABOUT US</a>
</li>
<li class='has-sub '><a href="Products.aspx">PRODUCTS</a>
<ul>
<li class='has-sub '><a href='#'>Product 1</a>
</li>
<li class='has-sub '><a href='#'>Product 2</a>
</li>
</ul>
</li>
<li><a href="Services.aspx">SERVICES</a>
</li>
<li><a href="Enquiry.aspx">ENQUIRY</a>
</li>
</ul>
</nav>
</header>
</div>
<section>
<article id="Articleleft">
</article>
<article id="Articleright"></article>
</section>
<div id="footer">
<footer>
<div id="socialmedia"></div>
<div id="QuickLinks"></div>
</footer>
</div>
</form>
</body>
对于Css，请检查小提琴.. !!!
小提琴演示
小提琴
整页的网站结果
问题
正如您在整页的结果中看到的那样，小提琴的100% width的页眉和页脚未占据整页？
我已经花了将近两天时间来解决这个问题，但是一切都是徒劳的。
请帮助我，并指出网站中是否有错误。
编辑：我希望页眉和页脚分别固定在顶部和底部。 它们都应该占据屏幕的整个宽度。
但是主要部分将仅占据中部地区。
要更清晰，请参阅图像。
谢谢
3 个解决方案
解决方案1
4 已采纳 2014-02-15 18:32:17
小提琴
您必须在CSS中更改此设置：
nav ul ul {
visibility: hidden;
position: absolute;
top: 100%;
z-index: 598;
max-width: 100%; <-- from width to max-width
max-height: 100%; <--- from height to max-height
bottom: 0;
margin-top: 0;
text-transform: none;
min-width: 190px;
}
#############################
#footer
{
padding:0px;
height:150px;
min-width:100%;
width: 1000px; <-------- here --------------
clear:both; -
background-color:#333; -
margin-top:10px; -
-
} -
footer -
{ -
color:#ffffff; -
width: 1000px; <--------- this have be to ----
bottom : 0;
position:relative;
}
这将删除页眉和页脚。
解决方案2
0 2014-02-15 18:27:00
我相信这与您的填充有关-一旦您在导航中的文本上使用填充-它会有效地增加和并创建该偏移量。
解决方案3
0 2014-02-15 18:32:23
要回答你的，为什么你有边界线和顶部导航之间的空间差距问题::你有margin-top: 20px的section
并且如果您希望页脚为“粘性”并固定在底部，则将以下内容添加到#footer
position: fixed;
bottom: 0;
HTML / CSS布局问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.