I have 2 divs, a sidebar and the main pane.
.main {
position: absolute;
min-width: 400px;
top: 0;
bottom: 0;
left: 200px;
right: 0;
overflow: auto;
}
.leftSidebar {
position:absolute;
top:0;
bottom:0;
left:0;
width: 200px;
padding-left: 10px;
overflow-x: auto;
overflow-y: scroll;
}
I want the main div to have a horizontal scrollbar when the size is less than 400px, but currently content just gets cuts it off when it is less. What am I missing?
If this helps, here is a demo of this. Changing the width of the window should ideally add a scrollbar to the main div, but it only puts the scrollbar on the entire window.
Solution: http://jsfiddle.net/nnt7ctjr/
By giving the .main a min-width you forced it to stay at those dimensions and overflow outside of the viewport, thus a scroll bar appeared for the entire screen.
So the solution is to mimic this effect within the .main. I created another object span.content and gave it the min-width:400px;. Now the text will retain the 400px dimension while the .main div continues shrinking.
Related
I want to make a sticky footer like the one I made in this example.
http://codepen.io/Kenny94/pen/JvtFs
html, body {
height: 100%;
width:100%;
padding: 0;
margin: 0;
position: relative;
}
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
The problem is it doesn't work right in my current project. It sets the footer behind the body but if I start to scroll it appears. If I watch the size of the body in chrome it has a height off 970px but the whole site is much bigger because of the post. It seems to me that the body didn't expand like the Blog Post Wrapper. I set the BG-Color to grey in the body and that fills the whole page. I have no clue why it dosen't work with height 100%. I could set the height to 4000px to fit with the content and everything else but thats not a real solution.
I'm not exactly sure what you are trying to achieve.
-If you are wondering why the footer is placed behind the body, it's because you set
z-index to -1.
So the fix would be this: http://jsfiddle.net/bmpy6/
-If you don't want to have it visible when scrolling (so to say, keep it fixed at the bottom at all times), this should be what you want: http://jsfiddle.net/bmpy6/1/
For that, you omit the position: fixed;.
You don't need to set your height on the html tag or the body tag. It will flow with the content. You're setting the min-height of the main div to 100%. This will take up the rest of the remaining space when a view is loaded pushing the footer off the screen. You can either change the height of the main div or make the footer position fixed to the bottom of the screen if you want it to be sticky as in stick to the bottom of the screen.
Change :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
To :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: 1;
}
Just changing the z-index will bring your footer to the front. Remember that the Z-index basically gives your id's and classes precedence over one another in terms of their visibility.
You do not need to set the height at all. Try this:
div {
font-size: 30px;
margin-bottom:60px;
background: red;
}
Instead of:
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
You see, when you tell the page to have a height of 100%, you are telling it fill 100% of the screens height. When you remove the height,(In this case it was a min-height so it will expand if needed) the <div> expands to the height needed to hold the content.
See this JSFiddle for a working example
Hope this helps!
I have two Elements horizontally aligned, and the left one is a list. If I add some items so that the list should start scrolling, the list just grows larger then my device height is and my second content on the right side scrolls away if I scroll the list downwards. So the list is more then 100% in height... Here is some code for you :
http://codepen.io/anon/pen/qhylB
As I have created this code I just noticed that my both divs don't scale to 100% of the device width. Could you explain me why?
It's because the scrollbar is on the body (or html for firefox I think). Instead you need to have the body's height fix to 100% and then move the scrollbar to the list container (33percent div):
http://codepen.io/jonigiuro/pen/JEkLH
html, body {
margin: 0px;
padding: 0px;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.content33percent {
height: 100%;
max-height: 100%;
overflow: scroll;
}
i changed your 66% to a fixed position, now when you scroll down it looks like you are scrolling the list when you are actually scrolling the whole document, this way you can apply the scrolling over the complete document:
http://codepen.io/anon/pen/KLzvo
.content66percent {
background-color: blue;
height: 100%;
width: 66%;
position: fixed;
right: 5px;
also, i have removed the floating from both the 66%er and the 33%er and adjusted them a little. if you want them to touch each other, change 66% to 66.53%.
I'm creating a horizontal animated page transition system where the screen scales to accomodate the incoming page. The problem I have is when moving to a smaller page size, the previous (larger) page overflows out of my content wrapper and consequently causes my overall page to extend past the footer. This screen capture shows my problem.
You can see how the current page exits on the left, after the screen has shrunk to accomodate the incoming smaller page. (the yellow is the footer, the white the unwanted screen extension).
Currently my "page" css is
.myPage
{
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
display:none; /*Pages are displayed once called*/
opacity: 1;
}
I've attempted fiddling with overflow-y:hidden which I thought might work but no such luck.
What can I do to keep my page class from extending out of my content and screwing up my page?
EDIT:
Here's the page wrapper.
.pageWrapper
{
background: #FF0000;
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-transform: translateX(0%);
}
Edit2: A jsfiddle thats broken but features all my code
overflow-y won't work without a fixed height. Try setting the height to 100% or some other value that looks right.
In this case you could also set bottom instead of height to give the element a fixed height.
Why does setting overflow: auto; on an element not cause it to scroll even when its contents overflow?
I have a two column layout with a fixed left column and a scrolling right column. The right column, is set to overflow: auto;, and it has a child div.content. If I set its minimum height taller than the window, the scroll bar will not appear. If I set the minimum height on its child, div.content the scroll bar appears.
Why is this? Why won't the scroll bar appear when the minimum height is set on main?
Here's a fiddle: http://jsfiddle.net/gT8tq/1/
<div class="page-wrapper">
<aside>
<p>Fixed</p>
</aside>
<main>
<section class="content">
<p>Scroll</p>
</section>
</main>
</div>
Styles...
html, body {
height: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
.page-wrapper {
bottom: 0; left: 0; right: 0; top: 0;
position: absolute;
z-index: 100;
}
aside, main {
bottom: 0; top: 0;
padding: 20px;
position: absolute;
}
aside {
background-color: #eee;
left: 0;
width: 30%;
}
main {
background-color: #ccc;
left: 30%; right: 0;
overflow: auto;
/* Here is the issue; uncommenting this breaks scrolling; Why? */
/* min-height: 1000px; */
}
.content {
min-height: 1000px;
}
In your CSS,
html, body {
height: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
It means that no matter how the height overflow the body element, the scroll bar will not appear.
Besides, overflow: auto in main element is required because actually the scroll bar belongs to the main element instead of the default body element.
main {
background-color: #ccc;
left: 30%; right: 0;
overflow: auto;
}
If you do not want overflow: hidden in body element, you must set position:fixed to aside element.
Check it on http://jsfiddle.net/gT8tq/4/
When you set min-height: 1000px on your main element, what ends up happening is that its contents no longer overflow it because it is now 1000 pixels tall. Note that min-height takes precedence even though you anchored the main element to the page bounds using absolute positioning and bottom: 0; top: 0, simply because that results in the main element being less than 1000 pixels tall. What happens then is that the element remains anchored to the top according to its top coordinate and overflows downward, because it's over-constrained thanks to min-height; the details of all this are documented in sections 10.6.4 and 10.7 of the spec.
Since overflow no longer occurs on the main element, it no longer needs to generate a scrollbar for its contents. The main element and its contents still overflow the page as I've described, but since you specified overflow: hidden on html, body, the page will refuse to generate a scrollbar for the main element. The end result, therefore, is that no scrollbar is generated at all.
If you force main to generate a vertical scrollbar even when no overflow occurs, by replacing overflow: auto with overflow-y: scroll, you'll see that the scrollbar actually extends beyond the page bounds such that you no longer see the bottom control(s) — this proves that by adding min-height you have in fact made the main element taller:
main {
background-color: #ccc;
left: 30%; right: 0;
/* overflow: auto; */
overflow-y: scroll;
min-height: 1000px;
}
That is because you set the behavior for a certain element, in this case <main>.
What should <main> do when it's contents are greater than the element itself?
In this case, you say it should create scrollbars in that case.
If you put overflow: auto; on the page-wrapper, it will do what you expect, because then you tell that div what to do when it's contents are overflowing.
Does that make sense or do you need more clarification?
You didn't use position:relative; for .content check this out:
http://jsfiddle.net/gT8tq/2/
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
}