Question

看看这个：

我需要将侧边栏放在右上方，但如果我使用右侧浮动，它会将侧边栏向右移动（但不是右上角）。

我需要让位置绝对接近，这对我来说更容易，但是如果我把这个类“mega”置于100％的高度会发生什么？页脚低于“主”类，我不知道为什么

    html,body{height: 100%;}
        body{margin: 0;
            padding: 0;}
    .main{height: 100%;
          background: #eee;
          border-radius: 5px;
          box-shadow: 0 0 1px 1px #000;}
        .mega{padding: 5px;
            position: relative;
    /*this breaks everything(footer is below "main" div)
    height: 100%; 
    */
    height: 100%; 
        }
        .new{width: 50%;
        background: #000;
        }
        .box{display: inline-block;
              margin: 5px;
              width: 100px;
              height: 60px;
              box-shadow: 0 0 2px 0 #000;
                  background: tomato;
    }
    
        .sidebar{width: 30%;
                 margin: 10px;
                 height: 30px;
                 background: royalblue;
                 box-shadow: 0 0 2px 0 #000;}
        footer{
            height: 100px;
            margin: 0 10px;
        background: gold;}

    <div class="main">
        <div class="mega">
            <div class="new">
               <div class="box">box</div>
                <div class="box">box</div>
                <div class="box">box</div>
                <div class="box">box</div>
                <div class="box">box</div>
                <div class="box">box</div>
                <div class="box">box</div>
                <div class="box">box</div>
            </div>
            <div class="sidebar">sidebar</div>
            
        </div>
        <footer></footer>
    </div>

Answer 1

当您声明高度为100％时，该div占据其父级div的100％的高度。因此，如果你说main是100％，而mega是100％，它将扩展以填充整个主div，迫使页脚超出主div。有几种方法可以解决这个问题。你可以将你的页脚嵌入巨型内部，使其高度达到100％。或者你可以给出几百像素的高度，并且页脚会偏移那个高度。

Answer 2

浮动侧边栏会将其置于.new元素下方，因为.new未浮动。你需要浮动两个元素才能并排放置它们。

http://jsfiddle.net/on10qewb/5/

此外，请务必在寻求帮助时正确缩进代码 - 这会让事情变得更容易。

高度与百分比（％）打破了页面

2 个答案: