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
Related
This site is full-width and adapts to the size of the browser window. However, once the browser window is smaller than the content displayed, the title gets cut off once you scroll to the right.
The default width of 100% seems to be working for the width of the browser window only, not the width of the page! The same also seems to apply on the vertical axis.
Example
#title
{
height: 50px;
color: white;
background-color: #404040;
}
#content
{
width: 800px;
background-color: #f0f0f0;
}
<div id="title">
TITLE
</div>
<div id="content">
CONTENT
</div>
Actual result
This is what it looks like when the page is scrolled to the left
(For the sake of simplicity and privacy, content irrelevant to the question is censored.)
After fiddling a lot with positioning, I eventually came up with something.
body
{
position: absolute;
min-width: 100%;
min-height: 100%;
}
#menu-background
{
z-index: -1;
position: absolute;
width: 250px;
height: 100%;
background-color: #404040;
}
and the menu background HTML
<div id="menu-background"></div>
<body> needs absolute positioning, otherwise the table of the content div will overflow out of the content div. Also, it needs a min-width of 100% to cover both cases: Either the window is smaller, or it's larger.
The menu works the same way, except that it is a single <div> that spans the entire page.
This solution works perfectly for both X and Y (menu and title) stretching and background color.
It's clear that width: 100% takes the width of the window, but not the document.
This behavior is not entirely clear in the spec as far as I can tell.
10.2 Content width: the width
property
<percentage>
Specifies a percentage width. The percentage is calculated with
respect to the width of the generated box's containing block. If the
containing block's width depends on this element's width, then the
resulting layout is undefined in CSS 2.1.
Two methods around the problem involve CSS positioning.
1. position: fixed
Fixed positioning makes the width relative to the viewport.
#title {
height: 50px;
color: white;
background-color: #404040;
position: fixed; /* NEW */
width: 100%; /* NEW */
}
DEMO
2. position: absolute
Absolute positioning also works:
#title {
height: 50px;
color: white;
background-color: #404040;
position: absolute;
width: 100%;
}
DEMO
For me it worked with this two little friends:
width: auto;
min-width: 100%;
No positon: fixed/absolute needed
We have a sticky side panel on our page implemented with the following very-simple CSS:
position: fixed;
top:62px;
bottom:10px;
Where the top and bottom properties create the desired margins.
The problem is that this panel contains several accordion-style elements, and expanding some of them causes the content to overflow past the bottom of the screen and become invisible/inaccessible. Adding an overflow:auto; rule to the above css style almost solves the problem, by inserting a scrollbar that allows the user to scroll vertically to see the would-be hidden content. However, this results in two scrollbars - one for the main nav and one for the sidebar - which feels clunky an unintuitive. Instead, I'd like to have the "fixed" element scroll with the main scrollbar when it overflows. I'm aware that this would essentially make it not a fixed element, and thus am afraid I'll have to resort to JS to make this happen - but does anyone have a cleaner, html/css-only way of handling this?
I'm not sure this is what you need, but hope it helps some way.
#container1 {
height: 400px;
width: 200px;
overflow: hidden;
position: fixed;
top: 62px;
bottom: 10px;
background: #888;
}
#container2 {
width: 100%;
height: 99%;
overflow: auto;
padding-right: 20px; /*Adjust this for cross-browser compatibility */
}
#container2 ul li {
height: 300px;
}
html, body {
height: 99%;
overflow:hidden;
}
<div id="container1">
<div id="container2">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<div>
JSFiddle
Also in chrome you can try out:
::-webkit-scrollbar {
display: none;
}
But this snippet works only in chrome, so I would rather use the above.
Let me try to help. Use Panel-body class selector to handle this.
First you should do many things, such as, width of the div and the second div.
You can manage to hide the scrollbar as follows:
.panel-body {
height:300px;
overflow:auto;
margin-right:0px; // when it shows scrollbar, you need to set it MINUS.
}
Second, you also take notice when browser window gets resized by user and you need to manage Media Queries in related to the div width.
This is the DEMO.
I'm wondering if it's possible to position relative container with unknown height at the bottom left of a website so that any text in it starts at the bottom and goes up (as we add it)? It's like exact opposite of how browser usually renders it (from top to bottom, vertically).
Example:
<div class="container">Unknown amount of text</div>
.container { max-width: 600px; left: 100px; bottom: 100px; position: absolute; }
This works just fine but if Unknown amount of text is longer than height of user's monitor, vertical scrollbar does not appear. It requires position: relative; then but is there any way to make this container stick to the bottom left with position: relative;?
I'm looking for HTML/CSS solution only (if that's possible at all).
You can use an outer div to get some manipulation effect.
Give same bg color to both parent and child div then it give the bottom to top effect.
HTML
<div class="wrap">
<div class="container">Unknown amount of text</div>
</div>
CSS
html, body{height:100%}
.wrap{ background:green; overflow:auto; height:100%}
.container { max-width: 600px; background:green; position:absolute; bottom:0; }
DEMO
You can try this one i think this one help you
just changes in css. & in bottom you just increase margin top for set the bottom align.
.container { max-width: 600px; left:0; margin-top:200px; position: relative; }
When I positioning my wrapper absolute and right there is no horizontal scrollbar triggered when I shrink the window.
Example:
http://jsfiddle.net/Ue6aN/
Code:
<div id="wrapper"></div>
#wrapper {
width: 400px;
height: 400px;
position: absolute;
right: 20px;
top: 0px;
border: 1px solid red;
}
If I switch right: 20px; to left: 20px; it's working, but not otherwise. Any idea how to fix that without javascript?
The problem is that there is no content following #wrapper. To get a horizontal scroll there has to be content anchored on the left edge of the document that becomes hidden when the viewport is narrowed, or said content exceeds the viewport width. Since #wrapper is floating right, that's impossible because it has no left-side anchor point. :after makes it work though.
#wrapper { float:right ... }
body:after {
clear:right;
content:' ';
display:block;
height:1px;
min-width:420px
}
The CSS above adds a space after the content of body, which is #wrapper. That space is at least the width of #wrapper's box model, but has no float, and is anchored to the left edge of the viewport. So... as soon as its far right edge is hidden, the horizontal scrolling is triggered; thus giving the illusion that #wrapper is causing the scroll event.
The fiddle: http://jsfiddle.net/jg3nH/
Using float right would be more logical to me but you need to absolute position you could set the width or min-width of the containing element.
body {
position: relative;
height: 400px; //needs to be at least 1px
width: 100%;
min-width: 422px; // the width you'd like to horizontal scrollbar to appear
}
I have my markup like this (for argument's sake)
<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>
Then I use this CSS
#content {
width: 800px;
height: 600px;
margin: 0 auto;
} /* place this attached to the top of the page */
#sidebar,
#sidebar2 {
display: block;
width: 139px;
height: 100%;
position: absolute;
top: 0;
background: url(../images/layout/pretty.png) repeat-y;
}
#sidebar {
left: 50%;
margin-left: -700px;
} /* at this point, it appears to the left, and does not trigger scrolling when the window is resized.. it just slides off to the left */
#sidebar2 {
right: 50%;
margin-right: -700px;
} /* now, when you resize, the scrollbar appears as if the content stretches from #sidebar to #sidebar2 */
Is there a reliable way to do this? My only other option is to have a large background image, thats say 1200px wide with my repeating design on the left and right.. but this seems cumbersome if I could get this to work.
So my question is, is there a way to position 2 divs which won't affect the browser's interpretation of the width of the page (i.e. as you resize narrower, or smaller resolution, the divs are just hidden out of the viewport?)
Thanks!
EDIT
Thanks for the answers guys, but none are able to give me quite what I want. What's important is these divs that appear outside must be relative to the #content div. They need to appear to the left and right side, and butt up against #content. However, once the browser window is resized to not accommodate them, they should disappear under the viewport. I'd rather not use overflow-x: hidden as I'd like people with small resolutions/windows to be able to scroll left and right to see all the content.
It is possible, because I've done it.
The trick was using negative margins on absolutely positioned divs. For some reason the browser does not attempt to provide scrolling for objects pulled out of the page in this manner.
You can also use overflow:hidden. This will begin cropping your divs contents as the div itself shrinks (make sure the div uses a percentage or auto width so it will actually shrink).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cropped sides (no scrollbars)</title>
<style>
div.decor {
border: 3px solid red;
overflow: hidden;
position: absolute;
width: 48%;
height: 500px;
top: 2%;
}
div.content {
width: 60%;
height: 300px;
margin: 100px auto;
padding: 10px;
background-color: #DDF;
opacity: 0.7;
position: relative; /*hmmm.. without this content goes behind decor regardless of z-index... why?*/
}
</style>
</head>
<body>
<div class="decor" style="right:50%"><img src="images/teacher.jpg" width=400 style="position:absolute;right:0px;"></div>
<div class="decor" style="left:50%"><img src="images/teacher.jpg" width=400></div>
<div class="content">lorem ipsum</div>
</body>
</html>
Demo: http://test.dev.arc.net.au/cropped_sides.html
Key points:
overflow:hidden on absolutely
positioned decor divs
right:0 on content of left decor div
(forces cropping from left side)
unpositioned content goes behind the
decor regardless of z-index, but I
don't know why. Simple workaround is
to use position relative on your
content wrapper.
Very simple with absolute positioning. You can absolutely position the background and assign it a lower z-index than the main content. Example of just the right side - background color added for clarity:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Absolute Test</title>
<style type="text/css">
#content {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
background-color: blue;
z-index: 100;
} /* place this attached to the top of the page */
#layout2 {
height: 100px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>
</body>
</html>
Works with a picture as well:
#layout2 {
height: 600px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 0;
background: url(right-side.gif) repeat-y;
The absolute positioning removes it from the flow, so the browser won't add the width of your background to the window size. Since your content is a fixed width, this will even work with IE6.
You can use JavaScript to make the extra divs visible when the browser window is wide enough to handle both. There's no way that I know of to have the browser ignore the div for layout without actually making it hidden.
Yes you can do this but only on the left side of the screen.
If you have any content on the right (outside of the viewport) the browser will add horizontal scroll bars. The only exception to this is if you turn off the scroll bars but this cannot be done only horizontally across all browsers.
Back to the left side idea... Elements positioned off the left side of the viewport do not cause a horizontal scrollbar. You can have a fixed width layout that is centered on the screen (auto margins on either side) then from within this area you can absolutely position a new column in the left space. If the browser viewport is narrow you won't see it, if it's wide it will be completely visible and usable. The only problem is if it's half-way in the middle - your left column will be chopped off - this could look a bit messy!
Another alternative is to detect the width of the viewport with JavaScript and only show the column if there is room?
Alternately, you could place the two "floating" divs in a container div set to the max width, and set the "overflow" to "hidden".
That's the easiest way!
ie. Something to this effect:
<div id="wrap">
<div id="left></div>
<div id="center"></div>
<div id="right"></div>
</div>
css:
#wrap{
width:800px;
overflow:hidden;
}