我使用 4 个 php 文件来定义网站中的 4 个主要元素(边栏、顶级用户名、内容和页脚)。 我设法获得正确的布局，但我不希望网站重新调整大小。当我重新调整浏览器大小时，用户名的划分与侧边栏冲突。我不想发生这种事。请查看所附图片并告诉我如何防止这种情况发生。
现在的问题是页脚。它总是与 body 发生冲突。试着把它放在很长的正文内容中，并且页脚保持在正文的中间位置。我的代码如下:
您可以在这里查看:jsfiddle
HTML:
<body>
<div id="user-logged">
You are logged in as : <strong>User</strong><br>Logout
</div>
<hr>
<div>
<a id="logo" href="."><img id="logo" src="images/logo.png"
alt="BRS"/></a>
<div id="sidebar">
<h1 style="color:#fff; padding-left:20px; font-size:15px;">My
Reporting System</h1>
<ul>
<li>Outlet Settings</li>
<li>Update Daily Stats</li>
<li>Void Stats</li>
<li>Email Report</li>
</ul>
</div>
</div>
<div class="body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
pharetra eget lacus vitae elementum. Morbi a justo est. Aenean aliquet
elit ac nunc vestibulum rutrum. Vestibulum blandit pellentesque erat, a
imperdiet sem. In egestas in sapien at pellentesque. Praesent non
commodo nunc. Integer porta malesuada placerat. Maecenas nec sem varius,
suscipit sem vitae, vulputate ligula. Nam sed ligula suscipit, faucibus
augue et, iaculis nibh. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Nam at neque vel est elementum tincidunt. Nullam accumsan finibus
mauris, non auctor enim. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Ut at ligula eu turpis volutpat
aliquet et et quam. Aliquam est nulla, eleifend eu nibh a,
lobortis mollis ex. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed cursus, dui eu finibus
ultricies, leo velit laoreet sapien, in pretium lectus ipsum quis
</div>
<div id="footer">
Test 2015. All rights reserved.
</div>
</body>
CSS:
#logo {
position:absolute;
top:5px;
left:15px;
width:150px;
height:auto;
}
#sidebar {
width:200px;
min-height:500px;
height:auto;
background-color: #6699cc;
padding:1px;
}
#user-logged {
top:0px;
right:0px;
text-align: right;
padding-top:50px;
padding-right:10px;
margin-left:200px;
height:50px;
min-width:200px;
}
.body-content {
position:absolute;
top:126px;
margin-left:202px;
min-height:700px;
background-color: #ccc;
width:80%;
clear:both;
height: auto !important;
}
#footer {
position:absolute;
padding-top:20px;
width:100%;
height:150px;
font-size:12px;
background-color: #cc9966;
text-align:center;
font-weight:bold;
color:#fff;
}
最佳答案
您的问题已在以下链接中解决，请查看
<div id="wrapper">
<div id="header"><div id="header-content">Header</div></div>
<div id="content">
<div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
<div id="main">
Main<br />
Main<br />
</div>
</div>
<div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>
CSS:
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
position: relative
}
#footer {
height: 50px;
}
#footer-content {
border: 1px solid magenta;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
.push {
height: 50px;
clear: both;
}
#header {
height: 50px;
}
#header-content {
border: 1px solid magenta;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
#content {
height: 100%;
}
#sidebar {
border: 1px solid skyblue;
width: 100px;
position: absolute;
left: 0;
top: 50px;
bottom: 50px;
}
#main {
margin-left: 102px
}
关于html - 似乎无法使用 css 获得正确的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33116748/