I have a sidebar which is fixed to the left edge of the window and has some scrolling content aligned at the bottom of the window. Normally, I could set the scrolling content's container top property to the height of the content above it and everything would look ok.
Here's an example of what I'm talking about. And a more concrete example
#sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
/* and inside sidebar */
#header {
/* my question is, how do I achieve this effect when this height is 'auto' */
height: 100px;
}
#scrollable-content {
top: 100px;
overflow-y: scroll;
}
When the content above the scrolling content does not have a fixed height, can I achieve the same effect? Do I need to introduce JavaScript? How might I fix this fiddle so that I can always see the bottom of the scrolling content?
You can add a few lines of javascript (using jQuery) to find the height of the scrollable area:
// find the scrollable height
var scroll_height = $(window).height() - $('#header').height();
// set the height of the scrollable div
$('#scrollable-container').css('height', scroll_height + 'px');
Then do the same within the click function after the hide/show so that the new header height is used
http://jsfiddle.net/94E4Z/2/
Related
I've just got started with Material Design Lite. I want to change the width of the drawer.
What I have tried is something along these lines:
.mdl-layout__drawer {
width: 25%;
}
This results in the drawer overlapping the content area.
How do I correct this issue?
The drawer is an absolute component that rest in it's parent container a defined left position. When you change it's width, you'll need to alter it's position too.
Here's the css only solution for a width of 500px -
.mdl-layout__drawer {
width: 500px;
left: -250px;
}
.mdl-layout__drawer.is-visible {
left: 0;
}
Here's a codepen example -http://codepen.io/mdlhut/pen/pJmjBe
Is there a way to for web browsers to enable scrolling the entire height of a background image with background-image-size: 100%? I want to image to cover the entire viewing area horizontally, but doing so cuts of some off the image at the bottom. I want users to be able to see the rest of the image if they scroll down.
If you set to body tag a background image it will be shown in full height of page. Page height will depend on how many content on page.
From what I can tell, the answer is no. Instead, I wrapped the image in an img tag. Once it became content, scrolling worked as desired. Unfortunately it mean adding a z-index css property to the other content to get it to appear over the image.
Here's a snippet:
body {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
#image {
width: 100%;
margin: 0;
}
#content {
z-index: 100;
}
kineticjs generates a div container to wrap a stage canvas. But it sets this div's display attribute as display:inline-block.
I would like the canvas is displayed in full screen without scroll bar in browser. But with display: inline-block, there are always scroll bar displayed.
If I can set display as auto, the scroll bar will disappear.
Is there any way to set the css style for the div generated by kineticjs?
Thanks in advance!
I had the same issue a few weeks ago. I also didn't want the scrollbars to be visible, because my canvas is always scaling to full-screen. I worked this out by setting the complete html/body to overflow:hidden;
Complete CSS of my html, body:
html, body{
position: relative;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
To set the div at full-screen you simply have to set its width and height to 100%:
#container{
width: 100%;
height: 100%;
}
And last but not least, set the width and height of your stage to:
width: window.innerWidth,
height: window.innerHeight
I hope this could somehow resolve your problem :)
I would like to scroll within a div whose height extends below the browser window without scrollbars appearing on the browser window.
When I add an overflow:hidden style on the body tag this works as long as the div height is < the window height. How can I get the same effect when div height > browser window height?
Is the div height greater than the window height because you have set it that way in css or is there just a lot of content inside the div?
If you have already set its height in css, you might have to wrap it in another div first. Otherwise, try this:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
width: 50%;
overflow-y: scroll;
}
Example
I have a div ( position :fixed ) with varying height depending on the content in it. To have an auto scroll for that i have added overflow-y:auto and assigned a fixed height.
Is there a way to auto set the height of the div so that when the browser space gets changed, the height of the div changes accordingly, and if there is not enough space the scroll bar appears and when there is enough available space the scroll bar disappears.
use position:absolute instead of position: fixed and use the top left, right and bottom co-ordinates and set the scroll to auto;
example HTML:
<div id="resize">
<p>content</p><p>content</p><p>content</p><p>content</p>
</div>
CSS:
#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}
p {line-height: 3; margin: 0;}
Working Example : Here
Use two DIVs, one nested inside of the other.
The outer DIV should be set to position:fixed;max-height:100%;overflow-y:auto
The inner DIV will contain your contents. So far as I can tell, it won't require any specific styles.
What should happen (and what's happening when I test this fix in my browser) is that the outer DIV should shrink-wrap to fit the inner DIV -- but it will not exceed the height of the window. If the inner DIV exceeds the height of the window, it will also exceed the height of the outer DIV, producing a scrollbar.
EDIT: Sample markup:
<div id="outer">
<div class="inner">
Content goes here.
</div>
</div>
And the CSS:
#outer{
position:fixed;
max-height:100%;
overflow-y:auto;
bottom:0; /* sample value */
left:0; /* sample value */
}
#outer div.inner{
/* Whatever style you want the positioned box
to have. Border, padding, background, etc. */
}
You can listen to the resize event on the window and update the width accordingly.
$(window).resize(function() {
});
http://api.jquery.com/resize/
Alternatively, depending on the layout of your page, you might be able to just use height: 100% (or another % that works for you).