Question

我正在尝试制作一个简单，流畅，反应灵敏的两列布局（仅仅是为了学习CSS），包括侧边栏和主要部分。

我能够创建100％高度的侧边栏，将主要内容放在侧面，但是当我在主要部分放置H1时... tada！它的边际也为侧边栏创造了一个余地。

以下是显示问题的最低代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

      #sidebar {
        display:block;
        position:absolute;
        width:25%;
        min-height:100%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #main {
        margin-left:25%;
        display:block;
      }

      h1 {
        padding:2%;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }
    </style>
  </head>

  <body>
    <header id="sidebar">
      Let's reach for the stars!
    </header>

    <section id="main">
      <h1>Nope!</h1>
    </section>

  </body>
</html>

我在Chrome和Firefox中测试了它，两者都发生了。

I've created this JSFiddle，感谢cimmanon的评论，行为是一样的。

好吧，我迷路了。我错过了一些非常简单的东西吗？

这种方法是制作两列布局的好方法吗？我鼓励自己从Svbtle blogs阅读CSS。

如果不是，请以正确的方式灌输给我。我需要良好的CSS灌输：）

谢谢！

Answer 1

将display: inline-block添加到h1，它不会影响侧栏。然后你可以设置你想要的任何余量。

它在JSFiddle中看起来很好的原因可能是从它们的样式中应用的样式（检查h1，你会发现它有margin:0）。

Answer 2

一般来说，除非您确实希望从文档流中删除元素，否则应避免使用绝对定位。如果您的网页#main的内容短于#sidebar且用户的展示位置不足以显示所有#sidebar的内容，那么您将拥有你的内容被剪掉了。

我最喜欢的实现相等高度列的方法是使用display: table CSS属性。

http://jsfiddle.net/PmkCQ/3/

html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

body { display: table }

      #sidebar {
        width:25%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #sidebar, #main {
        display:table-cell;
        vertical-align: top; /* optional */
      }

      h1 {
        padding:2%;
        margin-top: 0;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }

当然还有其他方法，但这个方法比浮动或绝对定位更不易碎。唯一的缺点是IE7不支持这些属性，因此它们将继续使用元素先前定义的（或默认）显示设置（对于div，它将是block）。

一个元素的边缘影响其侧面的元素

2 个答案: