将页面内容调整为浏览器窗口宽度

我正在调整浏览器宽度的页面上工作。当浏览器窗口拉伸时，'内容'需要增长（让这部分工作！），当窗口缩小超过最小宽度时，页面结构需要保持不变。所以我应该可以滚动查看“侧边栏”，但它会跳下去。请帮忙！将页面内容调整为浏览器窗口宽度

这里是我到目前为止已经试过 -

<div id="wrapper" style="width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue;"> 

    <div id="content" style="width:54%; 
    float:left; 
    min-width:400px; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green;"> 
    </div> 

    <div id="sidebar" style="width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow;"> 
    </div> 

</div>

感谢。

来源

2013-09-27 imhere

给出的jsfiddle这将是明确的回答 – sun

这 - http://jsfiddle.net/tssCQ/ – imhere

设置卷纸上出现min-width: 850px;。或者你想要的最低限度是什么。首先把你的侧边栏和浮动是正确的：

小提琴：http://jsfiddle.net/mdares/JEVfC/

#wrapper { 
    width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue; 
    min-width: 850px; 
} 
#content { 
    min-width:400px; 
    width: 54%; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green; 
} 
#sidebar { 
    width:350px; 
    float:right; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow; 
}

而且 - 如果你不想让他们之间的增长差距，在#sidebar设置margin-left: 3%;。在#content上，删除width: 54%;并添加overflow: hidden;

来源

2013-09-27 15:35:01 Matthew

更新 - 刚刚意识到你的侧栏应该是在右侧。 – Matthew

谢谢！现在侧栏停留在那里，但当窗口拉伸时，内容需要增长。任何建议？ – imhere

我最后的注意事项表明，看到这里：http://jsfiddle.net/mdares/JEVfC/4/ – Matthew

可以定义一个最小宽度：

#wrapper { 
min-width: 600px; 
}

来源

2013-09-27 15:34:30 Roman

感谢！尝试过，但侧杆仍然跳下去。 – imhere

在您的div类中，将最小宽度参数添加到该样式，以便它不缩小到低于该样式！你可以是这样做的：

<div id="wrapper" style="width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    min-width:500px; /* Enter whatever minimum width you want your page to be */ 
    border: 1px solid blue;"> 

    <div id="content" style="width:54%; 
    float:left; 
    min-width:400px; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green;"> 
    </div> 

    <div id="sidebar" style="width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow;"> 
    </div> 

</div>

来源

2013-09-27 15:43:59

你跟@media查询或自适应网页设计熟悉？是在CSS3 maded。这可能会帮助您根据viwer的屏幕大小设计您的网页。

如何使用

您需要（使用@media查询）来设置最高和最低限度的with财产，dependely （或没有）屏幕的大小。检查this

解决您的问题 HTML

<div id="wrapper"> 
    <div id="content"></div> 
    <div id="sidebar"></div> 
</div>

CSS

#wrapper { 
    max-width: 90%; 
    width:100%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue; 
} 
#content { 
    max-width: 54%; 
    width:100%; 
    float:left; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green; 
} 
#sidebar { 
    with: 100%; 
    max-width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow; 
}

JSFIDDLE

来源

2013-09-27 15:44:30 fiskolin

这是世界卫生大会你在找什么？ check this

<div id="wrapper" style="width: 90%; 
    margin: 0 auto; 
    height:400px; 
    background: #fff; 
    padding: 20px; 
    border: 1px solid blue;"> 

    <div id="content" style="width: 54%; 
    float: left; 
    height:400px; 
    margin-right: 3%; 
    border: 1px solid green;"> Content </div> 

    <div id="sidebar-left" style=" width: 31%; 
    float: left; 
    margin-right: 3%; 
    height:400px; 
    border: 1px solid yellow;"> Sidebar </div> 
</div>

来源

2013-09-28 05:19:28 sun

将页面内容调整为浏览器窗口宽度

回答

相关问题