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.
Related
UPDATE: The problem has been solved using the code provided by Pradeep, specifically the "clearfix" code. I asked this question in search of a way of keeping my wrapper <div> behind all of my content, i.e. extend its height to the full height of all its children, and considered using a moving <div> where in reality my problem was fully discussed in "What is a clearfix?" and in CSS clearfix demystified.
Essentialy my container <div> had floating elements within that were expanding past the bottom of my wrapper. I wanted the wrapper to be behind all of my content so that users could read the text that was on top. Applying this new CSS class clearfix to my wrapper <div> the problem was solved but a new one created. I lost the ability to center the <div> on the page, which I did not state in my original question below. The solution to being able to center it again without losing the "clearfix" solution was to use a parent <div> that has margin-left: auto and margin-right: auto set. See CSS clearfix how to over come the inability to center an element using it
The Origional Question:
http://jsfiddle.net/L7TKx/
I want my <div> to move with the page as the user scrolls down the page.
I have seen answers on this site as well as others stating that you need to add the postion:fixed property but when I do this, my div which was centered on the page is now left aligned and the scroll bar disappears, so you cannot view the rest of the content. I'm looking for a fix that keeps the scroll bar and as the user scrolls, the <div> follows.
See http://www.rustdome.hfbsite.com/ I want that off white background to follow behind the text as the user scrolls.
I have the following and have experimented with position:fixed but that disables the scroll bar.
#wrapper {
min-width: 740px;
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: hsla(30,100%,97%,0.69);
height: 100%;
}
html {
min-height: 100%;
position: relative;
}
body {
height: 100%;
}
You can try below code:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
Above css add in your css file..and Add "clearfix" class in your main div(wrapper).
Good luck...
Instead of using position:fixed you'll probably want to use background-attachment:fixed. This will just make the background fixed while the text keeps being scrollable.
Regarding Pradeep's code you could also have used a simpler approach. You just needed to add this rule to your CSS:
#wrapper::after {
content: "";
display: block;
clear: both;
height: 0;
}
You will probably want it to be a separate div entirely from the one that houses your content. I am assuming the #wrapper is the off-white thing you want to move around, and I'd try something like bellow.
HTML:
<html>
<body>
<div id="wrapper"></div>
<div id="content">
Your Content
</div>
</body></html>
CSS:
#wrapper {
min-width: 740px;
max-width: 1000px;
width: 100%;
position: fixed;
left: 50%;
margin-left: 500;
background-color: hsla(30,100%,97%,0.69);
height: 100%;
z-index: -1;
}
#background {
z-index:-2;
}
I'm running into a minor issue with one of the elements on my page. I have a sidebar which I am attempting to have span the height of the page by using the following CSS:
#sidebar {
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
float: left;
background: #eee;
color: #666;
}
The corresponding CSS is pretty much what you'd expect:
<div id="header">
The header which takes up 50px in height
</div>
<div id="main-container">
<div id="sidebar">
The sidebar in question
</div>
<div id="main-content">
The rest of my page
</div>
</div>
The code works as expected for the most part. When the page renders it spans 100% of the height (minus the 50px from the top). The problem is that it essentially assigns the box to the exact height of the window so as I scroll down the box scrolls away instead of staying locked to the bottom of the window. Any ideas how to resolve this?
You have to use position:fixed if you want for the sidebar to be fixed on some position:
#sidebar {
width: 180px;
padding: 10px;
position: fixed;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Another way would be to give to the parent container position:relative, and on his child position:absolute - but then the parent must have some height so the child element takes its height.
html,body{
position:relative;
height:100%; /* some height */
}
#sidebar{
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Check learnlayout to read more about positioning.
use css position:fixed to make the sidebar fixed.
in order to lock the height according to screen height i would use javascript/jquery:
$(function(){
// assign to resize
$(window).resize(set_height);
});
function set_height() {
$('#sidebar_id').height($(window).height());
}
hope that helps
First of all, I don't understand how it's spanning 100% of the height when no height has been defined.
Secondly use position: fixed instead of absolute.
On a second note, I'd like to recommend what seems a more proper way of going about positioning this. At the end of the main-container div, before it's closing tag, put this
<div style="clear: both;"></div>
and make the main container also float left, or float right if that doesnt give you what you want. It's suprising how such a common layout can feel tricky to do properly. (at least for newbies like us). I might be wrong, this might not be a better way, but it's the way I'd do it. The extra div you add is so that floated divs take up space, apart from that if it doesn't work, give the sidebar a height of 100%, or if you think it will overflow, tell me I'll add to my answer.
I have a wrapper that contains all the elements of an html page.
#wrapper {
width: 1000px;
height: auto;
min-height: 100%;
margin: auto;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
background-attachment: fixed;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
Here's the HTML code sample
<div id="wrapper">
<div id="uppermenu">
<div id="container">
<div id="logo"> <img src="images/logo.png" height="100%"> </div>
<div id="banner"> <br></div>
</div>
</div>
<div class="sidemenu"> [...] </div>
<div id="guide"> [...] </div>
</div>
I want this wrapper to change its height depending on the content it has to contain, but as I do this is not happening.
If I try to use
overflow: hidden;
the wrapper is shifted down by the uppermenu div (which it should be containing) and using
clear: both;
at the end of the contents doesn't change anything.
I've tried at least 5 different question answered correctly here but none worked well for me.
Last thing: the wrapper set as I wrote (with min-height at 100%) fits perfectly the screen of my browser, but that clearly not what I want it to look!
Any help???
EDIT: here's the CSS of sidemenu class
.sidemenu {
float: left;
margin-left: 20px;
margin-top: 20px;
height: 200px;
width: 150px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
and of the guide id
#guide {
float: left;
margin-top: 20px;
margin-left: 50px;
height: 100%;
width: 760px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
uppermenu and container
#uppermenu {
position: fixed;
top: 0px;
width: 1000px;
height: 100px;
margin: auto;
background: #004465;
z-index: 5;
}
#container {
width: 1000px;
min-height: 100%;
margin: auto;
}
Solution one: clear: both
Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. http://jsfiddle.net/TVD2X/1/
Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.
Cons: Requires the another tag to clear the floats, bloating markup.
Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.
Solution two: display: table
Adding display:table; to the parent to make it shrug off the floats and display with the correct height. http://jsfiddle.net/h9GAZ/1/
Pros: No extra markup and is a lot neater. Works in IE6+
Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.
Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.
A note on the other "solutions"
These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.
Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.
Setting the height does "prevent" the collapse but it is not a proper fix.
Invalid css
Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.
In conclusion
I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.
get rid of min-height: 100%. this means that the minimum height of the div is 100% of your browser height. eliminating this should make it fit to the content
Update - I've decided against the JavaScript solution. The only way to make sure it always works is to put it in setInterval() going every few seconds. Don't want to do that. I know this CSS is possible, I've seen it work. I'll re-open the bounty for more like 150 if it ends.
I have a modal popup made up of two sections: left and right. Within both sections are a label above and the content below. The label is fixed at a certain number of pixels, but the bottom area needs to be able to fill the remaining space, so I'm using display:table on the left and right sides and display: table-cell on the inner sections to achieve the "fill remaining space" effect. It works great in Chrome and Safari.
Here's the CSS:
#tagBoxLeft,#tagBoxRight {
display: table;
height: 100%;
width: 50%;
position: absolute;
right: 0;
opacity: 0;
}
#tagBoxLeft { left: 0 }
#tagBoxDescription {
display: table-row;
-webkit-border-top-left-radius: 20px;
width: 100%;
word-break: break-all;
word-wrap: break-word;
-webkit-box-shadow: 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;
}
.nano {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: table-cell;
}
#taglabel {
display: table-row;
z-index: 10000;
border-top: 1px solid #FFF;
width: 100%;
height: 39px;
}
And it just makes a bunch of divs into a table so they can have heights that are relative to each other. Also notice that the left and right sides are relative to the browser window, so that's why I can't just use percentages.
However, in Firefox and Opera, the #tagBoxLeft and #tagBoxRight sides sections refuse to accept height:100%; while they have display:table;. So it won't force the bottom sections up responsively.I know Firefox & Opera support this normally (see http://jsfiddle.net/Qxswa/). But why does all my content overflow in Firefox and Opera?
Here's a screenshot of the issue:
Is there a reason why you can't simply use JavaScript to calculate the correct height and apply it inline? It's not as nice and simple, but it would be trivial for what you are describing.
var boxHeight = $('#tagBox').height();
var leftLabelHeight = $('#tagBoxDescription').height();
$('#tagBoxPopular').css('height', boxHeight - leftLabelHeight + 'px');
var rightLabelHeight = $('#taglabel').height();
$('#tagBoxStream').css('height', boxHeight - rightLabelHeight + 'px');
Here's an alternative to using display:table and friends, which uses the oft-neglected ability of absolutely positioned elements to have both their top and bottom (and left and right) values set. It essentially 'sticks' the top and bottom edge, giving you a height relative to a container, but without explicitly setting a height.
UDPATED: As Jackson mentioned, the CSS-only version of this code doesn't provide an auto-height, fixed panel in the column. A simple bit of JS will fix that - you'd just need to set a sensible default height for users without JS. The JS only needs to run when you load the modal, not at intervals.
Here's the updated fiddle: http://jsfiddle.net/cxY7D/5
and here's the simplified HTML:
<div id="modal">
<div class="left">
<div class="description">
<h1>#tag_name</h1>
<dl>
<dt>Tags</dt> <dd>27</dd>
</dl>
</div>
<div class="contents">
<div class="header">
<h2>Featured</h2>
</div>
<ol>
<li>Something Something</li>
<li>...</li>
</ol>
</div>
</div>
<div class="right">
<div class="contents">
<div class="header">
<h2>Recent</h2>
</div>
<ol>
<li>Something Something</li>
<li>...</li>
</ol>
</div>
</div>
</div>
and CSS:
body {
background:#444;
}
#modal {
background:#FFF;
position: absolute;
top: 4em;
bottom: 4em;
left: 6em;
right: 6em;
}
#modal .left,
#modal .right {
position:absolute;
top: 0;
bottom: 0;
}
#modal .left {
background:#ACF9E4;
left: 0;
right:50%;
}
#modal .right {
background:#FCFFCD;
right: 0;
left:50%;
}
#modal .contents {
position:absolute;
top: 0;
bottom: 0;
width: 100%;
overflow-y:auto;
}
#modal .description {
height: 8em;
}
#modal .description + .contents {
top: 10em;
}
#modal .header,
#modal .description,
.contents li {
border-bottom:1px solid #CCC;
padding: 1em;
}
#modal .description dt {
float: left;
padding-right: 1em;
}
It's a really useful and robust technique. A lot of people get the shudders when you mention 'absolute positions', but used like this, it's really liberating!
The JS (assuming jQuery)
$(function(){
$('#modal').on('display', function(){
//Calculate the height of the top left panel, and provide the remaining space to the bottom left
var leftColumn = $(this).find('.left'),
descriptionHeight = leftColumn.find('.description').height('auto').outerHeight(); //Set the height to auto, then read it
leftColumn.find('.contents').css('top', descriptionHeight)//Apply the height to the scrolling contents pane
});
$('#modal').trigger('display');
});
The JS resets the top-left pane to auto-height, then reads the height and applies it as the top co-ordinate of the bottom-left panel. It's applied as a custom event, so you can trigger it as part of your modal display code.
Here's an answer I gave, using a similar technique, and more explanations of the hows and whys: The Impossible Layout?. Check the A list apart article for more discussion, and some simple fixes that make it work in IE6 (if you care about that).
I open your site on firefox and the hashtag links i see with chrome are gone. Are you doing some fix-attempts right now? If you put the links back in for the ff version I can help you debug this.
UPDATE:
What I see is a highly overcomplicated mix of display:table's and display:table-cells's with absolute and static positionings combined with percentual heights and many other highly cross-browser volatile mixes.
Doing lots of patching and fixing I was able to get this:
There's obviously many errors still present but at least you get some scrollbars.
Basically, the problem is that you're relying upon percentual heights and shady table-displays that are seemingly not very evenly rendered by different browsers.
We have two options here:
1.- Keep your original css/html approach and troubleshoot the JS scrollbar.
2.- Go for a much much much simpler css/html variant
Cheers
G
You may want to look at how you're using <section>. It is not the same as a <div>.
W3C - Using HTML5 section elements , and header elements.
<header> appears the same. They're both flow elements, and not designed as content containers, but as semantic structuring elements for content containers.
I used Firebug and changed both <header> and <section> to display:block on a hunch. Things started to shape up; however I could not get the scroll effect to fire after those changes. I then changed <header> in safari to display:inline. Sure enough - both my browser windows looked like this:
You need to have the #tagboxleft and #tagboxright's overflow hidden. This can be done by setting #tagbox to overflow:hidden, however that will hide part of the close button. so you need another div wrapped around the left and right but not the x with overflow:hidden.
Like so:
<div id="tagbox">
<div id="tagboxX"></div>
<div id="tagboxleftright" style="overflow:hidden"> <!-- This is the wrapper div around tagbox left & right. Of course, move overflow:hidden to the style sheet -->
<div id="tagboxLeft"></div>
<div id="tagboxRight"></div>
</div>
</div>
This worked in Firefox and it should work in Internet Explorer.
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
body
{
background-color: #B0B0B0;
color: #ffffff;
margin-top: 0px;
margin: 0px;
}
#header
{
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
}
#content
{
width: 80%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>
The html is like that but obviously with more content
Hope I haven't made this too confusing, thanks.
Just add overflow:auto; to your div.
You can also use the following if you only want x or y scrolling
overflow-x:auto;
or
overflow-y:auto;
use the overflow:scroll; to enable scrolling in the DIVs
You must add white-space:nowrap; to your body tag.
I believe you may want overflow: auto;
Here's a comparison between auto and scroll.
add the style
overflow: scroll;
to #content
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
What solved my issue was:
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
As stated by user3726345 , the best option to use is the
html,body {
overflow: visible;
}
using
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.