我用一个DIV做container,宽度设置的是100%,但是浏览器在右边总是空出来一块。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我用一个DIV做container,宽度设置的是100%,但是浏览器在右边总是空出来一块。相关的知识,希望对你有一定的参考价值。

CSS复位也做了。还是空出来一块。是不是声明的问题呢?

参考技术A margin问题,你把margin设为0就可以了具体css bodymargin: 0; 参考技术B 贴一下结构代码呗
还有 CSS
会不会试试
html, body
margin: 0;

就可以解决了?
参考技术C 少了css reset重置代码,细节去百度吧

设置 div 宽度等于窗口大小

【中文标题】设置 div 宽度等于窗口大小【英文标题】:Set div width equal to window size 【发布时间】:2014-01-12 19:26:45 【问题描述】:

我有一个宽度为 1300 像素的容器。在容器内我有其他 div。 我需要将内部 div 宽度设置为等于浏览器窗口大小,例如)1900px。 内容应该响应窗口大小。

我的html代码如下:

<div class="container">
  <div class="content">Some style goes here </div>
</div>

CSS:

.container 
   width: 1300px;
 

.content
  width: 100%
`

【问题讨论】:

【参考方案1】:

如果您的 div 宽度为 px 格式,则它不会响应。 它必须是% 格式。如果您将内部内容设置为width:100%,则内部内容将具有“.container”的宽度。 因此,为了让内部 div 成为窗口宽度,您应该让 .container 等于窗口宽度。

CSS:

.container
   width:100%;

或者,如果您愿意,我们可以使用 jQuery:

 var w = $(window).width();
 $('.content').css('width', w);

【讨论】:

如果像水平滚动一样跟随 div 的数量,则使用 min-width: 100%; 将每个 div 占据全宽。如果帮助某人,这是评论【参考方案2】:

您似乎想将content div 作为模式窗口打开,隐藏其余的正文元素。试试这个JSBIN DEMO

.content 
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  right:0;

【讨论】:

【参考方案3】:

将容器更改为

.container 
   width: 100%;

【讨论】:

【参考方案4】:

有了固定的width: 1300px;,你就不能有responsive to the window size div

正如codehorse所说,添加

.container 
   width: 100%;

但添加

html, body 
    height:100%;
    width:100%;
    margin:0;
    padding:0;

如果事先设置了父元素的尺寸,width: 100%; 的 css 将正确呈现!!

working demo

【讨论】:

【参考方案5】:

移除容器的默认(引导)最大宽度并将内容宽度设置为 100%

.content
      width: 100%;


.contianer
       max-width: none; 

【讨论】:

以上是关于我用一个DIV做container,宽度设置的是100%,但是浏览器在右边总是空出来一块。的主要内容,如果未能解决你的问题,请参考以下文章

将 Google Maps Container DIV 宽度和高度设置为 100%

bootstrap 中的container 怎么设置宽度占满浏览器

在静态网页中遇到的问题

设置 div 宽度等于窗口大小

怎么整个DIV加超链接

Container,设置宽高不响应?