当宽度设置为 100% 但宽度设置为像素时不重叠？答案

【问题标题】：Div overlap when width set to 100% but not when width set in pixel?当宽度设置为 100% 但宽度设置为像素时不重叠？
【发布时间】：2015-11-14 02:06:46
【问题描述】：

我正在为练习设计一个布局，在那里我设置了一个包装器 Div，并在 CSS 中设置了 100% 的宽度以及它的最小宽度：800px，但是在这个包装器 Div 内部，当我调整大小时，其他内容会重叠窗户。我的html页面

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width" />  
    <title>@ViewBag.Title</title>   
    <link href="~/Content/themes/MyStyle.css" rel="stylesheet" />  
    </head>  
<body>  
    <div id="wrapper">  
        <div class="header">  
            <div style="display:inline-block;width:400px;margin:5px 0 0 100px">This is my site</div>  
            <div style="display:inline-block;width:500px;margin:5px 0 0 20px"><input type="text"/>&nbsp&nbsp<input type="button" value="Search"/>  </div>  
            <div style="display:inline-block;margin:5px 0 0 50px">@Html.Label("","LogIn","")&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp @Html.Label("SignIn")</div>  
        </div>  
    <div>@RenderBody()</div>  
        </div>  
</body>  
</html>

我的 CSS

body,html,div,form {
margin:0;
padding:0;
}


#wrapper {
width:100%;
min-width:800px;
}

.header {
width:100%;
height:35px;
background-color:rosybrown;
}

所以我的问题是，如果我以像素为单位设置，那么我的标题 div 不会在大屏幕上展开，而且它的内容也会隐藏在小屏幕上。我完全没有想法，并用谷歌搜索了这个问题，但没有得到任何解决方案。

【问题讨论】：

你能创建一个jsfiddle吗？我不知道我复制你的代码得到的是否是你实际得到的。
@Paran0a 好的，我将创建它，但这与这个几乎没有什么不同，因为这里我使用带有 HTML Helper for Label 的 ASP.Net MVC。给我一些时间，因为我的网速很慢。 :)
@Paran0a 给你jsfiddle.net/s5mnf45r

标签： html css

【解决方案1】：

你需要做以下事情来实现这一点。

从 DIV 中删除内联 CSS
移除导致问题的最小高度
创建一个类并提供您想要的 display:inline 和 margin
如果要指定宽度，请仅以百分比形式指定，以便调整

下面试试

body,html,div,form {
margin:0;
padding:0;
}


#wrapper {
width:100%;
}

.header {
width:100%;
height:35px;
background-color:rosybrown;
}
.site {
  display:inline;
  margin:10px;
}

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width" />  
    <title>@ViewBag.Title</title>   
    <link href="~/Content/themes/MyStyle.css" rel="stylesheet" />  
    </head>  
<body>  
    <div id="wrapper">  
        <div class="header">  
            <div class='site'>This is my site</div>  
            <div class="site"><input type="text"/>&nbsp&nbsp<input type="button" value="Search"/>  </div>  
            <div style="display:inline-block;margin:5px 0 0 50px">Login</div>  
        </div>  
    <div>@RenderBody()</div>  
        </div>  
</body>  
</html>

希望对你有帮助！

【讨论】：

不，对我来说根本不起作用。问题是当我们将包装器 Div 宽度设置为 % 时它不起作用但是当我们在像素中设置它不重叠时，不知道是什么原因造成的。