Question

我的班级有3个父级。它们将页面的三个部分分开：页眉，正文和页脚部分。标题没问题。在身体我有一个div应该画一条线像统治者。

我把循环代码放到这一行来绘制它但它失败了所以我设置了一个绝对位置，以便标尺/线的内容增加高度也增加。然后在页脚中由于某种原因我应该设置position:relative;但是当我这样做时，页脚div出现在身体div上。

我该如何解决？

请注意，身体和标尺/线的高度是自动的，当我为身体设置背景颜色时，它没有任何区别。

代码示例：

HTML

<body>
<div class="header">it's own code and classes</div>
<div class="body">
  <div class="line">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post">
      <div class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><h3><?php the_title(); ?></h3></a></div>
      <div class="cont"><?php get_the_excerpt();?></div>
     <?php the_post_thumbnail('45*45'); ?>
  </div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div class="footer"><div class="ftr"></div></div>
</body>

在css部分我有这些：

.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
 }

 .line {
width:4px;
height:auto;
background:#000;
position:absolute;
right:640px;
padding-top:100px;
padding-bottom:30px;
 }
 .post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
 }
     .post:after {
    content: "";
    position: absolute;
    top: 6%;
    margin: -10px 0 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    right: -10px;
    border-left: 10px solid #999;
     }
 .title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
 }

 .cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
 }
 .footer {
width:999px;
height:200px;
margin:auto;
 }
.ftr {
    width:999px;
    height:200px;
    background:#000;
    position:relative;
    clear:both;
}
    .ftr:after{
        content:"";
        position:absolute;
        top:-9px;
        right:500px;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid #06c;
    }

已编辑：这就是我想要的

.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
 }

 .line {
width:4px;
**height:100%;** //this fixed the problem
background:#000;
padding-top:100px;
padding-bottom:30px;
 }
 .post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
 }
     .post:after {
    content: "";
    position: absolute;
    top: 6%;
    margin: -10px 0 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    right: -10px;
    border-left: 10px solid #999;
     }
 .title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
 }

 .cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
 }
 .footer {
width:999px;
height:200px;
margin:auto;
 }
.ftr {
    width:999px;
    height:200px;
    background:#000;
    position:relative;
    clear:both;
}
    .ftr:after{
        content:"";
        position:absolute;
        top:-9px;
        right:500px;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid #06c;
    }

编辑2 ：我仍然有画线的问题。因为内容是动态的，如果我在内容增加或减少时设置height:100%或像素比例甚至是min-height它不会改变行的高度

Answer 1

当您在position:absolute;中放入某些内容时，它们会从容器上下文中删除，而不会展开它们。因此，当您将页脚放在position:relative;中时，它会落在div class="body"结束的位置，但由于它只包含line（绝对值），因此正文为空，因此页脚显示为“ “页脚。

如果我了解您的需求，您应该关闭line，以便“帖子”也不在position:absolute;。

<div class="body">
  <div class="line"></div><!--here-->
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post">

wordpress帖子内容不会扩展其父div高度

1 个答案: