Question

我有一个身体背景，我在那个身体里有一个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>

Answer 1

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

您未在代码中使用固定宽度，使用＆＃39;％＆＃39;是动态的。在重新调整窗口大小时，它将始终以＆＃39;％＆＃39;从屏幕的每个边界。

您需要页面溢出＆＃39;，以超出屏幕边框。有两种方法可以做到这一点：

为您的div提供固定宽度（以像素为单位）

div.emptybody {height：auto;宽度：900px;}
给孩子＆＃39; div（div.emptybody）中的div是固定宽度。

div.emptybody {身高：100％;宽度：97％;}
div.emptybodyChild {height：auto;宽度：900px; }

Answer 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 / values来指定div posicion

Answer 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;
}

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

3 个答案: