How to make body content overflow horizontally only?
I am trying to have a page overflow horizontally and not vertically, so if the content does not fit in the page window, i would like it to be scrollable only via the overflow-x bar, thus keeping the page a fixed height. The idea is to make it 'grow' horizontally - so to the ri开发者_开发技巧ght. Could this be done with CSS ideally?
Any help will be appreciated! :)
Thanks and take care, Sincerely, Piotr.
Here's the solution :). This does not require to set a fixed width, but you still have to control the height of your content. And in production you'll most probably want to add inner containers, and add some tweaks to make it work in IE.
Fiddle: http://jsfiddle.net/AWq39/7/.
<body>
<div class="page-container">...</div>
<div class="page-container">...</div>
<div class="page-container">...</div>
</body>
html, body{
height: 100%;
padding: 0;
margin: 0;
white-space: nowrap;
font-size: 0;
}
.page-container{
display: inline-block;
height: 100%;
max-width: 700px;
padding: 0 2em;
font-size: 14px;
white-space: normal;
overflow: hidden;
vertical-align:top;
}
You can make it grow automatically. Instead of a set width i.e. width: 6000px; you can use width: max-content; and it will scale automatically to fit horizontally with your content.
height:100%;
width: max-content;
overflow-y:hidden; #optional if you want to lock down height.
It won't automatically grow horizontally but you can easily set it to scroll horizontally if your content demands. You need to set fixed widths to accommodate for the content. Example, fixed height:100%;, fixed width:6000px; and an overflow-y:hidden; overflow-x:scroll; which unfortunately isn't fully compatible with all browsers.
height:100%;
width:auto;
overflow:hidden
That should do the trick. Just make sure your content does not get higher than the page width or it will be clipped. You could fix that with javascript, creating a new column when the content length exceeds the height.
OK, width:auto doesn't work with floating elements inside... if using javascript (jquery) that can be fixed too. demo: http://jsfiddle.net/Q3dC5/
加载中,请稍侯......
精彩评论