如何在窗口调整大小时固定宽度？答案

【问题标题】：How to have fixed width on window resize?如何在窗口调整大小时固定宽度？
【发布时间】：2013-06-13 17:52:45
【问题描述】：

我有一个主体背景，我在那个主体中有一个 div。在调整窗口大小时，我希望拥有这样的应用程序。为了保持宽度，如果我为正文提供固定宽度，则在调整窗口大小时我没有得到滚动条，因此不显示整页。如果我不提供固定宽度，页面对齐方式会发生变化，并且主体内的元素会在窗口调整大小时折叠。这是我的代码。提前致谢。

 body.background
{
    background: url(../images/common/header/Background_color.png);
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:top center;  
    height: 100%;
    width: 100%;
    border: 0;
    background-size:contain; 
    position:fixed;
    overflow:auto;
}

div.emptybody
{
   height:100%;
   width:97%;
   background-color: rgb(255, 255, 255);
   margin: 0px 25px 25px 25px;
   height:470px;
   background-position:center;
   background-repeat:no-repeat;
   background-attachment:fixed;
}


<body class="background">
<div class="emptybody">

-------------other elements and contents---------------

</div>
</body>

【问题讨论】：

标签： html css scrollbar

【解决方案1】：

为了保持宽度，如果我给身体固定宽度。

您没有在代码中使用固定宽度，使用 '%' 是动态的。在重新调整窗口大小时，它总是会从屏幕的每个边框开始计算 '%'。

您需要页面“溢出”，超出屏幕边界。有两种方法可以做到这一点：

给你的 div 一个固定的像素宽度

div.emptybody { 高度：自动；宽度：900px;}
为父级 (div.emptybody) 中的“子级”div 提供固定宽度。

div.emptybody { 高度：100%;宽度：97%；}
div.emptybodyChild {高度：自动；宽度：900px； }

【讨论】：

其实我试着给身体固定宽度。那时，如果我调整大小，只会显示部分页面。
我的应用程序看起来像我有一个背景，在中心我有这个空体 div。现在您可以在空体 div 的顶部、底部、左侧和右侧看到背景。但是，如果我为空体 div 指定固定宽度并且如果我调整大小，那时我无法看到右侧的背景。我希望你明白我在说什么。

【解决方案2】：

试试这个

body {
    height: 100%;
    bottom: 0px;
    width: 100%;
    background-color: black;
}
div {
    position:absolute;
    height: 10px;
    width: 200px;
    margin:10px;
    background-color: red;
}

您也可以通过提供 margin-top/left/ 或仅使用 top/left/ 值来指定 div 位置

【讨论】：

【解决方案3】：

您在正确的轨道上，但您错误地应用了溢出。溢出需要针对你内容的div，并且需要设置为滚动，在这里找到：http://jsfiddle.net/msbodetti/EWwJA/

您还为 div 指定了两个高度。它在另一个 470px 的高度之前应用了 100% 的高度。如果您的内容需要，您还可以在主 div 中添加 div 或 span 以获得固定的宽度和高度。

HTML：

<body class="background">
<div class="emptybody">

    <span class="fixedText">-------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents---------------</span>

</div>
</body>

CSS：

 body.background
{
    background: #000;
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:top center;  
    height: 100%;
    width: 100%;
    border: 0;
    background-size:contain; 
    position:fixed;
}

div.emptybody
{
   width:250px;
   background-color: rgb(255, 255, 255);
   margin: 0px 25px 25px 25px;
   height:200px;
   background-position:center;
   background-repeat:no-repeat;
   background-attachment:fixed;
   overflow:scroll;
}

【讨论】：

我不需要单独为 div 滚动条。
但是如果设置为宽度和高度 100%，它不会显示 body 的滚动条。您可以在 body 内添加一个 div 并将其设置为固定背景..
如果我包含overflow:scroll，即使内容没有超过限制，我得到的滚动面板没有栏。你明白我的意思吗？
jsfiddle.net/msbodetti/EWwJA 我需要这样的。但是当我调整窗口大小时，背景的右侧部分不可见，因为如果我为 div 指定了一些固定宽度，它会被 div 重叠
您希望它在调整浏览器大小时显示背景？您是否尝试过 margin: 0 auto;对于内容 div jsfiddle.net/msbodetti/EWwJA/8 我添加了一个 80% 的 div，然后添加了 100% 的内容 div。我将 margin 0 auto 应用于 wrap div，但它更向右对齐，然后我将它添加到内容 div以及它的中心..