Question

我试图将标题设置为固定位置，以便在滚动页面时始终显示标题。标题（父div）里面有两个子div。当我将父div定位为fixed时，父div高度设置为0并忽略其子div。我该如何实现这一目标？

＆＃13;

/*HEADER ELEMENTS*////////////////////////////////////////////////////
#header_container{
    min-width:240px;
    width:100%;
    height:auto;
position:fixed;

}

#header_container:after { 
    content: " "; 
    display: block; 
    clear: both;
} 

#left_header{
float:left;
width:42%;
display:block;
background:white;
padding:1%;
padding-left:7%;
position:relative;
}

.logo_link{
    padding:1%;
    margin:1%;
}


.lh_link{
   padding:1%;
   margin:1%;
}

.lh_link:hover{
  border: 1px solid #e9e9e9;
  
}

#right_header{
    float:right;
width:42%;
padding:1%;
padding-right:7%;
background:white;
text-align:right;
position:relative;
}

.rh_link{
   padding:1%;
   margin:1%;
}

.rh_link:hover{
  border: 1px solid #e9e9e9;
  
}



/**/

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div id="header_container" role="header">
    
    
    
    <div id="left_header">
        
        <a class="logo_link" href="">I am the logo</a><br><br>

        <a class="lh_link" href="">Welcome here</a>
        
        <a class="lh_link" href="">Articles</a>
    
        <a class="lh_link" href="">Join</a>
    
    </div>
    
    
    
    <div id="right_header">
        
        <br><br>
    
        <a class="rh_link" href="">About</a>
        
        <a class="rh_link" href="">Contact</a>
        
        <a class="rh_link" href="">Our Team</a>
        
        <a class="rh_link" href="">Services</a>
        
    </div>
    
    
    
</div>

＆＃13;

Answer 1

试试这个：

HAVING pledge_balance <> "0"

这是一个清算问题：因为你将包含的div浮动到左边，你的容器div需要补偿它们的浮动。您可以使用上面的CSS或将#header_container{ min-width:240px; width:100%; height:auto; position:fixed; float: left; }应用于您包含的div。这两种方法都应该有相同的结果。

Answer 2

出于某种原因，将.clearfix添加到#header_container（父级div）就可以了，其他一切对我来说都不起作用：

标记

<div id="header_container" class="clearfix" role="header">

的CSS

#header_container{
    min-width:240px;
    width:100%;
    height:auto;
}

.clearfix:after {
     display: block;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { 
    display: inline-block; 
    position:fixed; 
    min-width:240px;
    width:100%;}

.clearfix { display: block; }


#left_header{
float:left;
width:42%;
background:white;
padding:1%;
padding-left:7%;
position:relative;
}

#right_header{
float:right;
width:42%;
padding:1%;
padding-right:7%;
background:white;
text-align:right;
position:relative;
}

如何修复包含浮动相对子项的父div？

2 个答案: