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

我试图做一个简单的，流畅的，响应式的两列布局（只是为了学习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灌输:)

谢谢！

来源

2012-12-25 Castilho

默认情况下，JSFiddle添加了一个不正确标记为“规范化”的重置。看到没有规范化：http://jsfiddle.net/PmkCQ/2/ – cimmanon

哦，不知道。在我的例子中，我依靠的是h1有余量的事实，jsFiddle与“正常化”从h1剥离了余量，谢谢！ – Castilho

一般来说，绝对定位应该避免，除非您确实希望从文档流中删除该元素。如果您有一个页面，其中#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）。

来源

2012-12-25 14:28:37 cimmanon

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

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

来源

2012-12-25 14:16:27 Amit

谢谢，但你知道它为什么影响它在第一个地方？即使使用display：block（或者我对CSS中的显示工作有一个很大的误解） – Castilho

，对我来说也没有任何意义，除此之外，更好的方法是将display：inline-block放在section处，而不是在H1，对吗？ – Castilho

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

回答

相关问题