Question

我使用4个php文件来定义我网站中的4个主要元素（侧边栏，顶级用户名，内容和页脚）。我设法正确布局，但我不希望网站重新调整大小。当我重新调整浏览器大小时，使用用户名的部门与侧边栏冲突。我不希望发生这种情况。请查看附图并告诉我如何防止这种情况。

现在问题是页脚。它总是与身体相冲突。试着把它放在很长的身体内容中，并且页脚保持在身体的中间位置。我的代码如下：

您可以在此处查看：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;
}

Answer 1

您的问题已在以下链接中解决，请查看

click here

<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
}

Answer 2

您没有发布任何代码，因此我假设您可能使用HTML <frameset>或php inculde()。

但最好的是使用当前具有内置媒体查询的Bootstrap框架。

您可以通过Bootstrap Tutorial了解它

注意： <frameset>不支持HTML 5

似乎无法使用CSS获得正确的布局

2 个答案: