如何修复包含浮动相对 children 的 parent div？

Question

我正在尝试为我的 header 设置一个固定位置，以便在滚动页面时 header 始终可见。 header(parentdiv)里面有两个childrendiv。当我将 parent div 定位为固定时，parent div 高度设置为 0，它会忽略它的 children div。我该如何做到这一点？

/*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;
  
}



/**/

<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>

Answer 1

试试这个：

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

  float: left;
}

这是一个清理问题：因为您将包含的 div 浮动到左侧，您的容器 div 需要补偿它们的浮动。您可以使用上面的 CSS 或将 clear: both; 应用于您包含的 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;
}

如何修复包含浮动相对 children 的 parent div？

How to fix a parent div containing floating relative children?

html

css

css-position