I'm trying to make a website with a top border running across, but when the browser window is compressed, and horizontal scroll-bars appear, the border at the top is visible only when the scrollbars is at their original position. If you scroll to the right, the border stops.
HTML code:
<div id='container'>
<div id='content'>
As you can see, when the window is small enough for scrolling, the border only exists in the "original" window space.
</div>
</div>
CSS code:
* {
border:0;
padding:0;
margin:0;
}
#container {
border-top:1px solid green;
}
#content {
width: 400px;
margin: 0 auto;
}
JS fiddle to show what's happening. (Resize your browser window so a horizontal scrollbar appears on the output window):
http://jsfiddle.net/RL77f/
This is a common behavior when the browser window becomes narrower than the fixed content width. The solution is to add a min-width to the outer container.
#container {
min-width: 400px;
}
#container {
overflow: auto;
}
Related
I'm building a page that has a list on the left, and a container showing a single item's details on the right. Here is a sample image showing the page layout and the parts I want to scroll.
In both the left container and the right container, I need to scroll when the data exceeds the container's viewport height. I only want the red-highlighted containers to scroll--the outer blue container is fixed, and the yellow portion inside the blue container is fixed. Only the red containers' contents should scroll, only when applicable.
I've put up a codepen where I'm playing around with it and can share it with you (the app itself is behind firewall, codepen is the best I can do). What you'll see on the codepen is that I can get the container to scroll when I set it's height (in this case, 380px, which is loosely about how much space is there on screen). If you move the sample codepen's container up, you'll see the scroll area stays fixed (duh), and if you increase the height of the scrollable container beyond 380px, once you go below viewport, scrolling starts to go away--at around 800px or so it completely goes away.
What the heck am I missing here? The blue containers should size themselves to the bottom of the viewport, whether it's 800px high or 1600px high. Then The red container's height would fill that available height inside the blue container, and scroll if necessary.
I'm really stumped on what I'm missing here.
Edit: jQuery and javascript sizing are not options. This is achievable by CSS only, I'm just missing some property somewhere and am stumped.
Edit 2: I tried the suggested html (html: height:100%, etc). It works in codepen, but when I attempt it on my full version of the site, it doesn't work. In the screenshot here, you can see the blue high-lighted area is the scroll container in question, and the white bar on the right is the scrollbar (custom-styled background) but no actual scroll--just the bar background.
I have implemented a basic version which should help you out.
You can find the code over at https://codepen.io/hunzaboy/pen/aWmMeJ .
Here is the CSS
body,
html {
overflow: hidden;
}
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
width: 20%;
background: blue;
color: white;
overflow-y: scroll;
}
.content {
background: yellow;
color: brown;
overflow-y: scroll;
}
with css just use overflow-y:scroll and define the max height, or just height
.that-box {
overflow-y:scroll;
height: ###px;
}
--edit: and hide the scroll bar at a certain width
#media screen and (max-width: 1024px)
{
.that-box {
overflow-y:hidden; //this will cause clipping on content outside of the box
height: ###px;
}
}
--edit2: a CSS solution
html {
min-height:100%;
position:relative }
body {
height:100%}
.box {
position:fixed;
height:100%;}
The solution I like to use is through use of the view width (vw) and view height (vh) units. Using 100 respectively for each is the equivalent of your viewport's current size.
HTML
<div class="dashboard">
<div class="left-panel v-scroll">
<!-- the stuff on your left nav -->
</div>
<div class="right-panel v-scroll">
<!-- the stuff on your right nav -->
</div>
</div>
CSS
.dashboard{
width: 100vw;
}
.left-panel{
height:100vh;
width: 20%;
float:left;
margin-left: 20px;
}
.right-panel{
height:100vh;
width: 76%;
display: flex;
}
.v-scroll{
overflow: scroll;
}
This will ensure that they will scale according to how your screen size changes.
I have a DIV on a webpage that has dynamically loaded content. If the content is too long (or the browser window is shrunk by the user), a vertical scrollbar appears on the DIV. And of course the width of the DIV shrinks to accommodate the scroll bar. So far so normal.
Is there a way to reserve a space for the scrollbar so that the width of the content doesnt change irrespective of scroll bar visibility? Ideally just using CSS.
To work in IE8+, and latest Chrome, FF, Safari, Android, OSi
http://jsfiddle.net/spiderplant0/VUhDt/
#content{
position: absolute;
left:10px; top:10px; bottom:10px;
width: 150px;
background: yellow;
overflow: auto;
}
Not sure is this is exactly what you want, but could you put the div in a container and set the containing div to overflow:auto? eg.
CSS:
#container {
position: absolute;
left:10px; top:10px; bottom:10px;
overflow: auto;
width: 170px;
background: blue;
}
#content {
width: 150px;
background: yellow;
overflow: none;
}
HTML:
<div id="container">
<div id="content">
Content here
</div>
</div>
js fiddle example here: http://jsfiddle.net/SC3bg/
You actually can use this Javascript code to detect if the div height is "higher" than the clientHeight :
div = document.getElementById('content');
var hasVerticalScrollbar = div.scrollHeight>div.clientHeight;
And then do whatever you want with this boolean (Edit CSS width according to it ...), I don't know any CSS rule which could responds your need
For example let's take a look for main page of Twitter bootstrap http://twitter.github.com/bootstrap/index.html
If I resize browser window to 400px I will see strange space on the right (look at the picture).
Another sample is StackOverflow. On browser resize header line with gray background don't resize to all screen (see below).
Why body don't resize to 100% of the browser window? I have a similar problem on my site
The issue happens when you make the browser window smaller than the minimum width of the content and horizontally scroll. Elements that are set to 100% width are 100% of the width, until you scroll horizontally, where they appear to be cut off.
The solution is to set a min-width on those elements so they are at least as wide as the content.
Here's an example:
HTML
<div id="header1">Broken header</div>
<div id="header2">Fixed header</div>
<div id="content">
content goes here.
</div>
CSS
#header1 {
background-color:#ccc;
border: 2px solid #00F;
}
#header2 {
background-color:#ddd;
min-width: 600px;
border: 2px solid #0F0;
}
#content {
width: 600px;
border: 2px solid #F00;
}
Demo
Similar questions:
100% width bg images not extending on horizontal scroll
CSS: background absent when scrolling horizontally
Footer not stretching 100% when horizontally scrolled
How can I avoid my headers and footers being broken when displaying content wider than the viewport?
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}
I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.
Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)
Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)
I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?
Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.
So you want:
A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.
See this demonstration fiddle which does all that.
The style sheet:
html, body, * {
padding: 0;
margin: 0;
}
.wrapper {
min-width: 500px;
max-width: 700px;
margin: 0 auto;
}
#content {
margin-right: 260px; /* = sidebar width + some white space */
}
#overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#overlay .wrapper {
height: 100%;
}
#sidebar {
width: 250px;
float: right;
max-height: 100%;
}
#sidebar:hover {
overflow-y: auto;
}
#sidebar>* {
max-width: 225px; /* leave some space for vertical scrollbar */
}
And the markup:
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.
Update
If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
I think this new demo fiddle does what you want:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
Demo: http://jsfiddle.net/AlienWebguy/c3eAa/
You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
This technique is seen on lots of websites today. What they do is give position: fixed to the div on the right side of the screen, so it is not affected by the page scroll.
CSS:
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
I assume you are looking for something like this.
http://jsfiddle.net/RnWdh/
Please notice that you can alter the width of #main_content as you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.
The trick to get the fixed menu to the right in your centered container is using left: 50% and margin-left to adjust it correctly.
For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;
One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#content and a div#rightPanel, the css may look something like:
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Just make sure that the left margin of #content is the same as the right margin of #rightPanel.
Here's an example: http://jsfiddle.net/william/ZruS6/1/.