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

我有一个身体背景，我有一个div在那个body.On窗口调整大小，我想有这样的应用程序。为了保持宽度，如果我给身体固定的宽度，在窗口调整大小我没有得到滚动条，因此整个页面不显示。如果我不给定固定宽度，页面对齐会发生变化，并且它会在窗口大小调整时崩溃。这是我的代码。提前感谢。如何在窗口大小上调整固定宽度？

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>

来源

2013-06-13 kishore

要保持的宽度，如果我给固定的宽度到主体。

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

你需要页面'溢出'，超过屏幕的边界。有这样做的方法有两种：

给你的div中的像素

div.emptybody {高度固定的宽度：汽车;宽度：900px;}
给他们的父子（div.emptybody）中的'子女'div固定宽度。

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

来源

2013-06-13 07:19:07 Musebo

其实我试图让固定宽度的身体。那时，如果我调整大小，只会显示页面的一部分。 – kishore

我的应用程序看起来像我有一个背景，在中心我有这个emptybody div。现在，您可以在emptybody div的顶部，底部，左侧和右侧看到背景。但是，如果我将固定宽度指定为emptybody div，并且如果我调整大小，那么当时我无法看到右侧的背景。我希望你明白我的意思。 – kishore

试试这个

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

还可以通过提供的margin-top /左/，或只使用顶部/左/值

来源

2013-06-13 07:42:31

这不起作用。谢谢。 – kishore

你在正确的轨道上指定的div职位，但是你错误地应用了溢出。溢出需要为您的内容与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-13 09:52:45 designtocode

我不需要为div分开的滚动条。 – kishore

但它不会显示身体的滚动条，如果它的宽度和高度设置为100％。您可以在身体内添加一个div并将其设置为固定背景。 – designtocode

如果我包含溢出：滚动，即使内容没有超出限制，我得到没有酒吧的滚动面板。你明白我的观点了吗？ – kishore

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

回答

相关问题