Question

问题：（http://i.imgur.com/mU5HBoa.png） enter image description here

正如你在上面的图片中看到的那样，mainContent浮动在浏览器视口的实际顶部下方，我不能让它坚持到顶部并同时保持居中。

同样是一个快速的问题，如何获得＃mainContent，.rightContentBorder和.leftContentBorder以从#contentBox ID中获取高度

body {
    background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/BG_pattern.png);
    background-repeat:repeat;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

p {
    text-align:left;    
}

li {
    text-align:left;
}

#contentBox {
    margin: 1px auto 1px auto;
    width:786px;
    height:auto;
    min-height:700px;
    max-height:none;
}

.leftContentBorder {
    width:27px;
    height:700px;
    float:left;
    background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Leftside_orangebar1px.png);
    background-repeat:repeat-y;
}

.rightContentBorder {
    width:27px;
    height:700px;
    float:right;
    background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Rightside_orangebar1px.png);
    background-repeat:repeat-y;
}

#mainContent {
    margin: 0 auto 0 auto;
    width:732px;
    height:700px;
    background-color:#CCC;
}

HTML

<body>
<div id="contentBox">
        <div class="leftContentBorder"></div>
        <div class="rightContentBorder"></div>
        <div id="mainContent">
            test
        </div>
    </div>
</body>

Answer 1

您是否尝试在css中设置正文和html边距/填充？

html, body {
  padding:0;
  margin:0; }

至于让divs取其父div的高度。您可以将div设置为高度：100％;但如果父div没有设定高度，这意味着什么。你的父div有高度：auto，所以它不起作用。

Answer 2

像这样做一个基本的css重置：

* {
margin:0;
padding:0;
}

这将删除所有元素的默认填充边距。

Answer 3

body {
    margin:0;
    padding:0;
}

我不会真正触及父html。如果身体规则失败，最佳猜测是沿途设置的不同值。如果一切都失败了，你可以使用定位并使其绝对。准备好头痛。

HTML和CSS不会触及浏览器视口的顶部

3 个答案: