浮动布局不会覆盖所有屏幕

我试图使用CSS用下面的代码浮动布局不会覆盖所有屏幕

<html> 
<head> 
    <link rel="stylesheet" type'text/css" href="styles.css"> 
</head> 

<body> 
    <div id="header"> 
     <h1>header</h1> 
    </div> 

    <div id="authentification"> 
     <h1>authentification</h1> 
    </div> 

    <div id="cart"> 
     <h1>cart</h1> 
    </div> 

    <div id="content"> 
     <h1>content</h1> 
    </div> 

    <div id="footer"> 
     <h1>footer</h1> 
    </div> 


</body>

和相关的CSS代码做一个浮动的布局：

#header 
{ 
    float: left; 
    background-color: #EAE5DF; 
    width: 80%; 
    height: 175px; 
} 


#authentification 
{ 
    width: 20%; 
    height: 175px; 
    background-color: #8A5D1D; 
    float: right; 
} 

#cart 
{ 
    width: 20%; 
    min-height: 400px; 
    background-color: #861825; 
    float: right; 
} 


#content 
{ 
    width: 80%; 
    min-height: 400px; 
    background-color: #EAE5DF; 
    float: left; 
    overflow: hidden; 
} 

#footer 
{ 
    width: 100%; 
    min-height: 50px; 
    background-color: #8A5D1D; 
    clear: both; 
    display: table; 
}

现在问题是上面的代码显示了divs，因为它们是为了显示，但是在底部留下了空白区域。 2）当div'content'或'cart'获得更多的元素时，可以通过以下方式来获得更多的元素： 2）当div'content'或'cart'比另一个，他们当然应该是相同的高度。

我很感激帮助。

来源

2017-03-26 user3785612

你为什么浴液剩下什么呢？ –

在哪一个？你可以运行代码，你会看到。这里是实际的计划： HEAD \ AUTHENTIFICATION ...... CONTENT \ CART ...... FOOTER – user3785612

当你想要div并排时，它不是一个好的想法，可以通过float来做到这一点，而是使用flex。

.wrapper{display: flex;} 
 

 
#authentification, #cart{width:20%; background-color: #bbb;} 
 

 
#header, #content{flex: 1; background-color: #eee;} 
 

 
#footer{background-color: orange;} 
 

 
h1{margin: 0;}

<div class="wrapper" style="height:100px;"> 
 
    <div id="header"> 
 
     <h1>header</h1> 
 
    </div> 
 
    <div id="authentification"> 
 
     <h1>authentification</h1> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper" style="height: calc(100vh - 150px);"> 
 
    <div id="content"> 
 
     <h1>content</h1> 
 
    </div> 
 
    <div id="cart"> 
 
     <h1>cart</h1> 
 
    </div>    
 
</div> 
 
<div id="footer" style="height: 50px;"> 
 
    <h1>footer</h1> 
 
</div>

来源

2017-03-26 16:12:08

其实我只是试过了代码，但它也不起作用。由于购物车应该放在内容的右侧。并且下面的空格也应该不存在 – user3785612

使用CSS属性框大小边框也会使body.and默认边距为零 –

是的，我做到了。其实就像我说的那样，购物车部分应该在认证和内容的权利之下。当我执行摘录时，我看到购物车正好在标题下。还有一件事是，当您在真实页面（而非片段）上运行代码时，最终会在页面的布局中留下大量空白区域。 – user3785612

浮动布局不会覆盖所有屏幕

回答

相关问题