html - wrapper 和 div 溢出

标签 html css

作为一个新手，我正在为网站的 CSS 而苦苦挣扎。

我已经用几个 DIV 和包装器创建了一个站点，但我无法让内部 DIV 溢出来拉伸(stretch)外部 DIV(包装器)。我看过http://www.sitepoint.com/examples/clearing_floats/example2.php但我看不到我的错误。

提前致谢!

body { 
    text-align: center; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg)
}
#wrapper {
    text-align: left; 
    width: 1250px; 
    padding: 0px; 
    margin: 0 auto;
    height: 100%;
    overflow:auto;
}
#logo {
    position: absolute;
    top: 50px;
    right: 10px;
}
#header {
    text-align:left;
    width: 100%;
    height: 155px;
    position: relative;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
    padding-left: 4px;
    z-index:9;
}
#menu {
    text-align: left;
    position: absolute;
    bottom: 6px;
    padding-left: 4px;
}
#headerimage {
    text-align: left;
    width: 100%;
    height: 268px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}
#mainwrapper {
    text-align:left;
    width: 100%;
    height: 488px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r    3_c2.jpg);
    background-repeat: no-repeat;
}
#maincontent{
    width: 800px;
    height: 488px;
    float: left;
    padding-left: 15px;
    font-family:Verdana, Geneva, sans-serif; 
    color: #000000;
}
#newscontent{
    width: 360px;
    heigth: 200px;
    float: right;
    margin-top: 20px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png);
    overflow:hidden;
    color: #000000;
    padding-left: 15px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
}
#footer {
    height: 56px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    clear:both;
}

<div id="wrapper">
    <div id=header><div id="logo"></div> 
    <div id="menu">

<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font color="#FFFFFF">  |  [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?>

    </div>
</div> 

<div id="headerimage"></div>

<div id="mainwrapper"> 
    <div id="maincontent"><?php page_content(1); ?><br style="clear:both"/></div>
    <div id="newscontent">
<?php

// customized cwsoft-anynews function call
$config = array(
    'group_id_type' => 'section_id',
    'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);

?>

    <br style="clear:both"/>
</div> 
</div>    
<div id="footer"><br /></div>

最佳答案

如果您严格遵循您提供的链接，您的新闻内容 div 必须成为主要内容 div 的一部分，并且您的主要内容必须具有 width=100%。像这样:

<html>
<head>
<style>
body { 
text-align: center; 
background: url    (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg)
}
#wrapper {
text-align: left; 
width: 1250px; 
padding: 0px; 
margin: 0 auto;
height: 100%;
overflow:auto;

}
#logo{
position: absolute;
top: 50px;
right: 10px;
}

#header {
text-align:left;
width: 100%;
height: 155px;
position: relative;
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
padding-left: 4px;
z-index:9;
}

#menu{
text-align: left;
position: absolute;
bottom: 6px;
    padding-left: 4px;

 }

#headerimage{
text-align: left;
width: 100%;
height: 268px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}

#mainwrapper{
text-align:left;
width: 100%;
height: 488px;
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r    3_c2.jpg);
background-repeat: no-repeat;

}
#maincontent{
width: 100%;
height: 488px;
float: left;
padding-left: 15px;
 font-family:Verdana, Geneva, sans-serif;
color: #000000;

}

#newscontent{
width: 360px;
heigth: 200px;
float: right;
margin-top: 20px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png);
overflow:hidden;
color: #000000;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}
#footer{
height: 56px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
text-align: center;
font-family: Verdana, Geneva, sans-serif;
clear:both;
}

</style>
</head>

<body>

<div id="wrapper">

<div id=header> <div id="logo"> </div> 
<div id="menu">            <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font     color="#FFFFFF">  |  [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?>    </div>   </div> 

<div id="headerimage"></div>

<div id="mainwrapper"> 
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/>
<div id="newscontent">
  <?php

    // customized cwsoft-anynews function call
$config = array(
'group_id_type' => 'section_id',
'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);


?>
<br style="clear:both"/>
</div> 
 </div>
</div>    
<div id="footer"><br />
                    </div>



</body>
</html>

然而，如果您的新闻内容 div 必须成为主要内容的一部分，div 意味着成为一种类似于 View 的表格，并且您的新闻内容应该在最后填满可用空间 - 这可以通过这种方式实现:

<html>
<head>
<style>
body { 
text-align: center; 
background: url    (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg);

}
#wrapper {
text-align: left; 
width: 1250px; 
padding: 0px; 
margin: 0 auto;
height: 100%;
overflow-x:hidden;
}
#logo{
position: absolute;
top: 50px;
right: 10px;
}

#header {
text-align:left;
width: 100%;
height: 155px;
position: relative;
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
padding-left: 4px;
z-index:9;
}

#menu{
text-align: left;
position: absolute;
bottom: 6px;
    padding-left: 4px;

 }

#headerimage{
text-align: left;
width: 100%;
height: 268px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}

#mainwrapper{
text-align:left;
width: 100%;
height: 488px;
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r    3_c2.jpg);
background-repeat: no-repeat;
position:relative;
}
#maincontent{
width: 800px;
height: 488px;
display:inline-block;
padding-left: 15px;
 font-family:Verdana, Geneva, sans-serif;
color: #000000;
overflow-x:hidden;
}

#newscontent{
left:800px;
heigth: 200px;
right:1px;
display:inline-block;
margin-top: 20px;

color: #000000;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
background-color:#770000;
overflow-x:hidden;
}
#footer{
height: 56px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
text-align: center;
font-family: Verdana, Geneva, sans-serif;
clear:both;
}

</style>
</head>

<body>

<div id="wrapper">

<div id=header> <div id="logo"> </div> 
<div id="menu">            <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font     color="#FFFFFF">  |  [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?>    </div>   </div> 

<div id="headerimage"></div>

<div id="mainwrapper"> 
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/> </div>
<div id="newscontent">
  <?php

    // customized cwsoft-anynews function call
$config = array(
'group_id_type' => 'section_id',
'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);

?>
<br style="clear:both"/>
</div> 
</div>    
<div id="footer"><br />
                    </div>



</body>
</html>

关于html - wrapper 和 div 溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19134926/

上一篇：css - 如何修复 css 中的边框，使其仅出现在当前 div 上？

下一篇：javascript - DIV 在内容改变之前跳到顶部

相关文章：

html - 为什么我的下拉菜单没有显示？

html - 我可以将 "overflow: hidden;"用于 Adsense 广告吗

javascript - 如何将数组从一个html传递到另一个html页面？

javascript - chrome扩展后台页面错误: "Uncaught SyntaxError: Unexpected token <"

javascript - 为什么我的 while 循环覆盖了 if 语句

html - 从搜索框中删除默认阴影

javascript - 将 css 添加到已存储在变量中的 jQuery 对象的伪元素

html - 如何在 Safari 15 中控制网站着色

javascript - js倒计时只倒计时一次

javascript - jQuery - slideUp 开始快结束慢？

©2024 IT工具网  联系我们