我用一个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%