I have a page with the following HTML structure...
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
The .wrapper is being set at min-width: 1100px for reasons I won't go into. Therefore when the browser is resized to less than 1100px I want a horizontal scrollbar to appear.
My CSS is as follows:
html {
overflow-x: scroll;
height: 100%;
}
body {
overflow: auto;
}
.wrapper {
min-width: 1100px;
margin: 0 auto;
}
For some reason the only horizontal scrollbar showing is one when you've scrolled vertically down to the bottom of the page, and it appears sort of "within" the main browser frame, above the main browser horizontal scroll area. I want the main horizontal scrollbar of the window to be the one that is available.
Here is a diagram of my problem: http://oi62.tinypic.com/r06m1z.jpg
And a codepen: http://codepen.io/anon/pen/ocxvs
Thanks in advance for any help!
Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).
Simply change your CSS to:
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
Related
I'm trying to create my page so that there are background images covering the side of the page while having nothing in the center as that's where the content will be. I want these images to stay fixed where they are, even if the user resizes the window so they're off-screen. I know how to at least set up the images but not how to keep them in place.
I think one example I can think of is how http://www.halolz.com/ is set up.
Usually the way this is done is by applying a background image to the HTML body and then placing all the content of the page into a container that's centered on the page.
HTML:
<body>
<div class="container">
My content
</div>
</body>
CSS:
html, body {
padding: 0;
margin: 0;
}
body {
background: red; /* change this to your background image */
}
.container {
background: white;
width: 400px; /* adjust this to the proper width */
margin: 0 auto;
}
JSFiddle: https://jsfiddle.net/13xaqh6z/
I am working on a page layout with a horizontal scrollbar.
I have some panels with fixed widths in a horizontal order, which should all have the viewport height. I decided to test the vh unit to do that.
.panel { height: 100vh; }
This is working fine, until I get a scrollbar.
The problem is, that vh ignores the height used by the scrollbar and therefore adds a vertical scrollbar.
I would like to subtract the height of the scrollbar from the measurements of vh; is there any way to do this?
You could use a parent element with overflow-y: hidden to ensure that you don't get a vertical scrollbar and then safely use 100vh inside it. This is assuming that you do actually need 100vh for some reason and don't just need to fill the vertical space.
HTML
<div id="main">
<div id="container"></div>
</div>
CSS
#main {
width:200vw;
height:100%;
background: red;
position: absolute;
overflow-y: hidden;
}
#container {
height: 100vh;
width:10px;
background: blue;
}
I am building a blog and have a large header image with the goal of filling the top of the screen (unless on monitor larger than 1500px)- however the scroll bar goes far beyond the header content and displays white space.
When viewed on an Ipad it zooms out and shows the extra space on the side of the content. Why is the width significantly larger than the image?
Here is the site: http://beautyintheweeds.com/
Here is the HTML and CSS:
<?php wp_head(); ?>
</head>
<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp- content/themes/journalist/images/longtop.jpg"/></div></div>
div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}
This code worked to center the header beyond the container and my hope was that it would always fill the top of the screen unless the monitor was too large. Any ideas why it is creating extra scroll space beyond the image?
Thanks.
It's the element with class="inner" that takes up the space. It gets its size from the image inside it, but then you use relative positioning to display the image to the left of the element.
If you want to use that method to center the elements, put a div around it all, that has overflow: hidden; and no width set so that it uses the default width: auto which will make it take up all the available width.
Try this
#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}
I would pull them out of the container. Move div.outer above div.container in the markup, remove all css for div.outer, div.inner then add a text-align: center; to div.outer and remove div.inner completely.
http://jsfiddle.net/pWDrD/
You will see if you increase the width of the fiddle box then the image automatically increases width without having any scroll bar. Do you understand how i did that? Let me know. If not i will explain. Simply put, when you want an image to go to 100% of the monitor then you need to put it into a container with width as 100% and margin auto, not fixed width and no position at all.
#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.
How do I make it so that #decoration to not occupy space so the vertical scroll bar do not appear.
EDIT:
Check out this link to see what I want. Just in such a way no vertical scroll bar is there.
http://jsfiddle.net/HLqwN/
Using overflow:hidden will clip part of #decoration so that do not work.
<head>
<style>
#wrapper {
width: 900px;
position: relative;
}
#decoration {
position: absolute;
width: 542px;
height: 126px;
top: 0;
left: 660px;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="decoration" src="/images/decoration.png" alt="" title="" />
<div id="content">
Some content
</div>
</div>
</body>
You could set overflow: hidden as the other answers are suggesting.
However, a "decoration" image should not be an <img>, it should be a CSS background-image.
Like this:
#wrapper {
height: 126px;
background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}
See: http://jsfiddle.net/rdSJH/
if it is a decorative image, perhaps you should use it as a background image on the wrapper rather than in HTML source, you can still position it 660px left and it will not then cause a content scroll bar as it's not content.
#wrapper {
width: 900px;
position: relative;
background: url(background.png) no-repeat 660px 0;
}
[update after your clarification]
OK so you want the decoration to overlap the wrapper if there's space available to do so, like a pop-out?
is so try this, fiddle
notes: the span holding the background image should be outside the wrapper, no width on the span use your left co-ordinate and right: 0; or whatever margin from the right you might like, and still use the image as a background image. the span can sit down the bottom of your HTML out of the way
You could use overflow: hidden; on your wrapper
You might want to wrap a div around the decoration image and set overflow:hidden on that. Setting overflow:hidden on your wrapper might cause other content to be clipped depending on your layout.
If it's just a decoration you should try doing it with a background image though, then you don't have to worry about the clipping.
I have a div on page with a fixed width of 1200px. It's this way because I inserted inside a collection of thumbnails to creates a mosaic. I don't want the mosaic to change if the page is resized.
The problem is that I don't want to have horizontal scrollbars on the page. The div is placed just for visual purposes.
How can I avoid the horizontal navigator scrollbars that is automatically created when browser size is smaller than the div size?
Update: The div can't be positioned fixed.
in css:
html,body {
overflow : hidden;
}
or if you want vertical scrollbars, overflow-x: hidden
or a cleaner way:
<div class="wrapper">
<div class="mosaic"></div>
</div>
and put width:100%;overflow:hidden on the wrapper.
You should be able to do this simply by setting your div to fixed positioning.
.hugediv {
background: blue;
width: 1200px;
height: 200px;
position: fixed;
z-index: 1;
}