响应式问题 - HTML答案

【问题标题】：Responsive issue - HTML响应式问题 - HTML
【发布时间】：2015-10-26 18:51:31
【问题描述】：

请检查下面的代码，它在完整的桌面视图中工作，当我尝试在响应式屏幕中检查它时，.topHeader 没有占据整个宽度。我试过 width: 100% 但没有运气，请任何人解决这个问题。谢谢你。

.clearfix:before, .wrapper:before {
	display: table;
    content: " ";
}
.clearfix:after, .wrapper:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

.topHeader
{ 
background-color:#E8999A;
    box-sizing: border-box;}
.wrapper
{
	width: 1100px;
	margin:0px auto;
}
.headerLeft
{
	float:left;
}
#logo {padding:20px 0px;}
#logo img {width: 200px;}

<div class="topHeader">
    	<div class="wrapper">
        	<div class="headerLeft">
            	<div id="logo">
                
                </div>
            </div>
            
        </div>
    </div>	
	<!--End Header -->

【问题讨论】：

顶部标题没有占据全宽是什么意思？请参阅this jsfiddle，它对我有用。
我猜那是因为你的.wrapper 是 1100px...
链接到网页？
@Bastiaan ya 它没有占用浏览器的全宽。请在你的小提琴中检查它。
@techies 你是指它周围的边距？请参阅 sebastianbrosch 的回答。

标签： html css

【解决方案1】：

将您的 .wrapper 设置为 100% 宽度，而不是 1100 像素。

认为这样就可以了。

【讨论】：

它像容器，所以我必须固定宽度。
@techies 为什么必须固定宽度？如果您希望事情完全响应，那么容器也应该是。
您可以设置另一个宽度，例如 80%，您的边距将完成这项工作并将其放在中间。百分比将始终响应您的屏幕宽度...

【解决方案2】：

似乎所有这些试图提供帮助的人都无法理解您到底在寻找什么以及您的问题是什么。你必须清楚地解释你想要达到的目标。

尝试一下。我添加了“最小宽度：1100px；”进入“顶部标题”。

sn-p 中的 clearfix 有什么意义？删除不需要的/不相关的代码以供参考。这让我们很困惑。

body, html {
  margin:0;
  padding:0;
}
.clearfix:before, .wrapper:before {
  content: " ";
  display: table;
}
.clearfix:after, .wrapper:after {    
  clear:both;
  content:" ";
  display:block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
.topHeader { 
  background-color:#E8999A;
  box-sizing: border-box;
  min-width: 1100px;
}
.wrapper {
  margin:0px auto;	
  width:1100px;
}
.headerLeft {
  float:left;
}
#logo {
  padding:20px 0px;
}
#logo img {
  width:200px;
}

<div class="topHeader">
  <div class="wrapper">
    <div class="headerLeft">
      <div id="logo"></div>
    </div>  
  </div>
</div>

【讨论】：

【解决方案3】：

移除.wrapper 响应式屏幕的宽度或使其自动：

.wrapper
{
    margin:0px auto;
}

【讨论】：