css 容器 div 未与页面顶部对齐

发布于 2024-12-07 15:41:55 字数 3201 浏览 0 评论 0原文

我有一个两列布局。我有一个 #mainContainer div，其中包含以下所有内容（#footer 除外）：

顶部：标题 div (#intro)（包含一个小的渐变图像），和 #hero div（包含图像）
包含两列： #content div
在左侧的 #content div 内： #mainContent div
在右侧的 #content div 内： #sideBar div
横跨底部（外侧） #mainContainer div): 底部的#footer div （包括像标题 div 这样的渐变图像）

很简单，对吧？但我无法让 #mainContainer div 位于浏览器顶部（没有空格或所有浏览器顶部都有 6-8 像素的默认边距/填充）并使 #footer div 跨越整个底部浏览器窗口的（不在任何 Div 内部）。（忽略页脚中的内联样式）。有人可以帮我吗？

更新：添加了 HTML

body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}



#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/

}

#intro {
/*top:0;*/
margin: 0;
text-align:left;

}


#hero {
width:960px;
padding-left:10px;
padding-right:10px

}



#content {
width:960px;
padding-left:10px;
padding-right:10px;
}

#mainContent_left {

float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}



#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}


#footer {
width:960px;
clear:both;
background:#cc9;
}

HTML：

<title>Descriptions </title>


<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>

<body>
<div id="mainContainer">

<div id="intro"><h2>introducing</h2></div>

<div id="Hero">
    <ul>
        <li class="name"></li>
        <li class="textJoin">is a member of </li>
        <li class="name"></li>
    </ul>
</div>

<div id="content">
    <div id="mainContent">

        <h3>First Topic title</h3>
        <p>floated left image and text</p>
        <p>Some content</p>
        <p>Some content</p>

        <h3>Second Topic title</h3>
        <p>Some content</p>        
        <p>Image here</p>

        <h3>Third Topic title</h3>
        <p>(floated left image here) Some text</p>

        <h3>Fourth Topic title</h3>
        <p>(floated left image here) Some text</p>>

        <h3>Fifth Topic title</h3>
        <p>(floated left image here) Some text</p>        
        <p>Image here</p>

        <p>(link to FAQ page)</p>

    </div>


    <div id="sideBar">sidebar content
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>


    <div id="footer_warranty">footer content
        <div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
        <div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
        <p style="clear:both;" />
    </div>
</div>
<p style="clear:both;" />
</div>

</body>
</html>

原文

I have a two-column layout. I have a #mainContainer div that contains all of the following (except the #footer):

Across the top: a header div (#intro)(contains a small gradient image),
and a #hero div (contains images)
To contain the two columns: a #content div
Within the #content div on the left: a #mainContent div
Within the #content div on the right: a #sideBar div
Across the bottom (outside the #mainContainer div): a #footer div on the bottom
(including a gradient image like the header div)

Simple, right? But I'm having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div's ). (disregard inline styles in footer). Could someone help me out?

UPDATED: ADDED HTML

body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}



#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/

}

#intro {
/*top:0;*/
margin: 0;
text-align:left;

}


#hero {
width:960px;
padding-left:10px;
padding-right:10px

}



#content {
width:960px;
padding-left:10px;
padding-right:10px;
}

#mainContent_left {

float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}



#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}


#footer {
width:960px;
clear:both;
background:#cc9;
}

HTML:

<title>Descriptions </title>


<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>

<body>
<div id="mainContainer">

<div id="intro"><h2>introducing</h2></div>

<div id="Hero">
    <ul>
        <li class="name"></li>
        <li class="textJoin">is a member of </li>
        <li class="name"></li>
    </ul>
</div>

<div id="content">
    <div id="mainContent">

        <h3>First Topic title</h3>
        <p>floated left image and text</p>
        <p>Some content</p>
        <p>Some content</p>

        <h3>Second Topic title</h3>
        <p>Some content</p>        
        <p>Image here</p>

        <h3>Third Topic title</h3>
        <p>(floated left image here) Some text</p>

        <h3>Fourth Topic title</h3>
        <p>(floated left image here) Some text</p>>

        <h3>Fifth Topic title</h3>
        <p>(floated left image here) Some text</p>        
        <p>Image here</p>

        <p>(link to FAQ page)</p>

    </div>


    <div id="sideBar">sidebar content
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
    </div>


    <div id="footer_warranty">footer content
        <div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
        <div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
        <p style="clear:both;" />
    </div>
</div>
<p style="clear:both;" />
</div>

</body>
</html>

分享到QQ

分享到微博