0

我有一个主体背景，并且该主体中有一个 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>
4

3 回答 3

0

你在正确的轨道上，但你错误地应用了溢出。溢出需要用于包含您的内容的 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;
}
于 2013-06-13T09:52:45.173 回答
0

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

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

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

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

    div.emptybody { 高度：自动；宽度：900 像素；}

  2. 为父级 (div.emptybody) 中的“子级”div 提供固定宽度。

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

于 2013-06-13T07:19:07.510 回答
0

尝试这个

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 位置

于 2013-06-13T07:42:31.840 回答