0

我想构建一个具有水平滚动的页面。我想要一个 div 来填充视图窗口。

我将宽度设置为 100%，这样它就可以在任何尺寸的屏幕上填充窗口，但是您不能将下一个 div 浮动到它的一侧。

有谁知道这样做的方法或根据屏幕大小设置宽度的方法。

我正在使用带有一点 javascript 的 php 和 codeigniter。

4

3 回答 3

2

使用您的 100 % Div 作为包装器，并在其中使用一些 div 来实现您的设计。我认为您必须为需要浮动和应用浮动的第二个 div 指定宽度，希望这对您有所帮助

于 2012-07-03T04:41:42.430 回答
1

你的意思是这个http://jsbin.com/upoqec/2/edit#preview？

HTML：

<body onload="resize()">
<div class="view" id="view">
</div>
<div class="follow">
    </div>
</body>

CSS：

body{overflow:auto; width:100%: height:100%;}
.view{width:100%; height:400px; float:left; border:2px solid black;}
.follow{position:absolute; left:100%; width:900px; height:400px; border:2px solid red; margin-left:20px;}​

Javascript：

function resize(){
  var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
} 
document.getElementById("follow").style.width=winW.toString()+"px";
 document.getElementById("follow").style.height=winH.toString()+"px";
}

​</p>

于 2012-07-03T04:43:51.663 回答
0

检查我发布的这个答案作为对另一个类似问题的回复。

https://stackoverflow.com/a/11293897/921204

所需的更改是：

a) 你不需要'left' div。所以删除它。

b）不要指定overflow-x: hidden;正文，因为您想要水平滚动。

此外，根据需要更改中心 div 的尺寸。在您的情况下，将其设置为100%宽度

于 2012-07-03T04:42:11.080 回答