Question

我有这个HTML代码

<body>
    <div id="container">
        <div id="header">
            <ul>
                <li><a href="index.php" class="active"><span>Home</span></a></li>
                <li><a href="login.php" class="active"><span>Login</span></a></li>
                <li><a href=""><span>Left Menu</span></a></li>
            </ul>
        </div>

        <div class="threecol">
            <div class='col3'>
                xg<br /><br />hxh<br /><br />x<br /><br />f<br /><br />h
            </div>
            <div class="col2">
                jjh<br /><br /><br />ghjh<br />x<br /><br /><br /><br />g
            </div>
            <div class='col1'>
                kgkdfh
            </div>
        </div>

        <div id="footer">
            <p>This page  <a href="">Powered</a> by <a href="">dddddd</a></p>
        </div>
    </div>
</body>

和CSS：

 #container {
     width: 98%;
     margin: 0 auto;
 }
 #header {
     clear:both;
     width:100%;
 }
 .threecol {
     position: relative;
 }
 .col1 {
     left: 1%;
     position: absolute;
     width: 15%;
     background-color: #eee;
 }
 .col2 {
     background-color: white;
     left: 16%;
     width: 58%;
     position: relative;
 }
 .col3 {
     left: 74%;
     top :0;
     position: absolute;
     width: 24%;
 }
 #footer {
     margin: 0 auto;
     position: relative;
     bottom: 0;
     width:100%;
     border-top: 1px solid #000;
 }

我得到的是：

容器不在整页中，有一些div出容器
页脚没有停留在底部，他达到了div。

我在定位和如何获得正确的结果之间迷失了。我做错了什么？

FOR {strong>演示jsfiddle

Answer 1

我的一些建议，我将如何做到这一点。我没有给你代码，但有一些技巧可以让你立刻做到这一点

摆脱.css
使用float：left来定位每个athor
使用class =“clear”创建一个div并添加到.css代码

div.clear {
明确：两者;
余量：0;
}
每次使用float属性
使用边距，填充，浮动

在我忘记之前，

body在某些浏览器中有一个标准填充。

body { 
 margin:0;
 padding:0;
 width:100%;
}

将照顾

Answer 2

1）Col2样式应为：

   .col2 {
    background-color: white;
    left: 16%;
    width: 58%;
    position: absolute;
    top: 0;
   }

将位置更改为绝对并添加顶部：0;声明。

2）Google粘性页脚。这非常复杂。

Answer 3

（1和2应该是单独的问题，但是这里有）

1：

<ul>/<li>标记上的边距以及<body>标记上的边距可能会阻止您的容器成为整页。在margin: 0;和<ul>上设置<li>，您应该很高兴。如果你想要它有间距，请使用填充。

边距将物体彼此远离，它们实际上不会添加像素空间。因此，如果列表具有左边距并且它位于容器内，则它将列表和容器推离页面边缘或容器外的其他dom节点。

容器外的div都是position: absolute。当某个东西是绝对位置时，它不再属于父元素，它会自动浮动在页面顶部，并且不会影响页面的布局。如果你需要它在容器内，那么你就不能把它放在绝对位置。

2：

对于你使用位置相对的页脚，这意味着“将这个x像素移动到通常会被渲染的位置”，然后你有底部：0;这意味着相对于通常情况下零位像素的位置。

您可能想要position: fixed; bottom: 0;。

Answer 4

我对JSfiddle有点新意，但这是解决方案：

抱歉格式不佳：

 .threecol {
          overflow: hidden;
          }
 .col1 {
        left: 1%;
        float: left;
        width: 15%;
        background-color: grey;
       }
  .col2 {
        background-color: white;
        width: 58%;
           float: left;

       }
  .col3 {
     float: left;


       width: 24%;
         background-color: grey;
       }

容器和底部没有右侧

4 个答案: