Question

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

我将宽度设置为100％，因此它会在任何大小的屏幕上填充窗口，但是您无法将下一个div浮动到它的侧面。

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

我正在使用php和codeigniter以及一些javascript。

Answer 1

使用你的100％Div作为一个包装，并在那个内部使用一些div来实现你的设计。我认为你必须指定你需要浮动并应用浮动的第二个div的宽度，希望这会帮助你

Answer 2

你的意思是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";
}

Answer 3

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

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

所需的更改是：

a）你不需要'左'div。所以删除它。

b）由于您需要水平滚动，因此不要将overflow-x: hidden;指定为正文。

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

宽度为100％的Div和浮动，因此一个偏离屏幕的一侧

3 个答案: