浮动右侧没有水平滚动条 [英] No horizontal scroll bar on float right
问题描述
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
/* #box {position:absolute;top:0;right:0;} */
/* #box {position:absolute;top:0;left:0;} */
/* #box {float:right;} */
#box {float:left;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
</body>
</html>
取消注释第一个浮点数左边的浮点数，你会看到。
Uncomment the first float left id with the float right one and you will see. I left my tried solutions commented out as well.
推荐答案
我不相信没有任何办法，不使用javascript。浏览器渲染相对于该页面的左上角的页面，因此位于该0,0点上方或左侧的任何内容实际上在屏幕外。所有溢出发生在底部和右侧。这与内容在任何块元素中的方式相同。因此，如果您有一个项目相对于页面的右侧定位，宽度大于100％。 0,0原点左侧的部分将只是屏幕外。
I don't believe there is any way around this without using javascript. The browser renders a page relative to the top-left corner of that page, so anything positioned above or to the left of that 0,0 point is effectively off-screen. All overflow happens to the bottom and the right. It's the same way with content inside of any block element. So if you have an item positioned relative to the right side of the page, wider than 100% width. The part to the left of the 0,0 origin point will simply be offscreen.
我希望有人能证明我错了。
I'd love for someone to prove me wrong though.
这里有一个javascript解决方案：
Here's a javascript solution that works:
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
#box {position:absolute;top:0;left:0;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
<script type="text/javascript">
function layout() {
if( typeof( window.innerWidth ) == 'number' )
this.screenWidth = window.innerWidth;
else //patch for IE
this.screenWidth = document.body.clientWidth;
this.el = document.getElementById('box')
if (this.el.offsetWidth > this.screenWidth)
window.scroll(this.el.offsetWidth,0);
else
this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
}
function eventListener(el,action,func) {
if (el) {
if (el.addEventListener)
el.addEventListener(action, func, false);
else if (el.attachEvent)
el.attachEvent('on' + action, func);
}
}
eventListener(window,'resize',layout);
layout();
</script>
</body>
</html>
这篇关于浮动右侧没有水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
