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
Related
I have a sticky-top navbar. I want the scrollbar to start scrolling inside the container and not the body, because when some other page is shorter and there's no scrollbar the items in the navbar move on the right (for the width of a scrollbar).
How do I need to change the html or CSS?
jsfiddle
You need to use overflow: auto on your container. But it only works if you set the height too!
I guess you want to stretch the container to full height. So the easiest way is to define a variable for the navbar height and calculate the container's height. Add this code to your css:
:root {
--navbar-height: 56px;
}
.navbar {
height: var(--navbar-height);
}
.container {
overflow: auto;
height: calc(100vh - (var(--navbar-height)));
}
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
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/
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 :)
What I want to do is setup multiple div's that each contain the contents of an entire page. Each div should be centered in the viewport and fill it entirely. Each successive div should be evenly spaced vertically based on the variable height of the viewport. For example say I have a view of 800x600 then each div should be this size and stacked. So, if I scrolled down exactly 600px I would only see page 2 div, 1200px I'd only see page 3 div. I don't have any code or example to share and my exhausted searches have turned up nothing of this sort. Is this possible with just css?
You simply have to give your html, body & divs a height: 100%;:
html, body {
height: 100%;
}
div {
height: 100%;
margin-bottom: 5px;
}
http://jsfiddle.net/KMMjv/
Because this would vary depending on the size of the user's browser window you would need to JavaScript to detect screen height and position them accordingly. Although you could set the height of each div with just CSS (height: 100%;) you would need to set the top with JS.
Here is a working JSBin: http://jsbin.com/ogokef/edit#preview
Use the following units:
vh for viewport height
vw for viewport width
html, body {
height: 100vh;
}
div {
height: 100vh;
width: 100%; /* you can use 100vw too, but for height it must be vh */
}