I am trying to display a page which has two sections which are scrollable. What I am seeing is that the lower section gets a scroll bar but it is truncated. When I change the height property of the section, from 90% to 50% then the complete scroll bar is shown. However, if I resize the browser to smaller size, the vertical scroll bar again appears truncated.
The CSS for the top most div is supposed to have a height in pixels.
.rootsection {
background-color: yellow;
padding: 5px;
margin: 5px;
overflow:hidden;
width: 100%;
height: 200px;
}
The CSS for the scrollable div is:
.bottomSectionScrollable{
background-color: green;
overflow:auto !important;
padding: 5px;
margin: 5px;
height: 90%;
}
When the height is changed to 50% and the root section height is unchanged to 200px, I see that the scroll bar is not truncated. I want that the scrollable section should always have a vertical scroll bar which is never truncated and it should not leave a blank space. This should be the case even when the browser is re-sized or the zoom / un-zoom action is done on the user. I am emulating the re-size action by changing the height of the root section.
FIDDLE
Any thoughts on how to ensure that the scrollable section's scroll bars are always visible and always occupy the full space of the parent box even when the browser is re-sized?
Related
I have a section on website where different testimonials appear and the div has a background color which appears fine on desktop but if viewed on mobile devices the testimonials text runs longer (vertically) than the background height.
This is the class that is assigned to the div
.quote{
background-color: #f7f7f7 !important;
border: 8px none;
height: 350px;
padding: 15px;
}
Now I know that the height is fixed to 350px but if I change that to 100% or auto that does not work. I need the background to appear as long as the text appears.
If you want the div to be 350px in height, then you're doing it right. But you will need to add overflow-y: hidden; or overflow-y: auto.
However, I do suggest you simply change height to min-height if you want the div to grow with the text.
I have a fixed div in my page, as you know if the height of the div is higher than the viewport of the browser you end up with a div you cant scroll since is the background that scroll and not the div (fixed to position).
So lets say:
<div class="fixed">
</div>
.fixed {
position: fixed;
border: 1px solid #000;
width: 200px;
background-color: green;
}
You can check here http://jsfiddle.net/n7b43s8a/1/ if you reduce the preview page height you see you cant scroll the div.
The bootstrap modal fix this issue, but I dont quite understand how they do it, seems the take away the scroll of the body and add a new spacer background div but is not clear.
Here's an example http://jsfiddle.net/RLQhh/750/
You see, even with a very small height you can scroll the div.
How they do it?
The key is overflow. Add overflow: hidden to body, and overflow: auto to your .fixed.
Of course, this assumes that your fixed container is somehow limited in height, as it will by default stretch to its contents height.
See http://jsfiddle.net/456vashr/ for an example
In the Bootstrap example; they used position:relative for their fixed div. You need to change your position:fixed to position:relative.
We like to integrate a dialog box into our webapplication.
We have dynamic height content and want the box to be as high as the content, but if the content is relatively high, we don't want to have the dialog box being higher than the window height.
In other words: wrap the content in the dialog box, if it makes the dialogbox taller than the window
Here is what does not work:
http://codepen.io/anon/pen/aClnr
Possible without JS? The problem is the dynamic height...
Requirements:
I want the box to be centered horizontally and vertically
I want a margin from the top and the bottom always (let's say 20px each)ยด
I want the #contentContainer to be scrollable when it overflows, not the box (thus keeping the 20px padding)
It doesnt look nice when the #contentBox is scrolling over the padding of #box
Don't want to have something like that:
http://codepen.io/anon/pen/Ajltx
Change your CSS to this:
#box {
width: 500px;
margin: 0 auto;
background: green;
position: relative;
overflow: auto;
max-height: 100%;
}
#contentContainer {
padding: 20px;
}
Like this, the box will become as heigh as the body max. When the content overflows the window a scrollbar will appear. Here is the demo: http://codepen.io/Nico_O/pen/jIJcb
If you take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/
You can see that both the sidebar and content elements stretch to the bottom of the view-port. This is what I want.
However, when given some content that stretches the page and requires the user to scroll: http://jsfiddle.net/p6qGg/
The sidebar and content divs cut off at the bottom of the view-port. I know why this happens, because 100% refers to the entire height of the parent element which in this case is the view-port, but when I change the markup to have a wrapper div surrounding the two elements and have min-height: 100% this happens: http://jsfiddle.net/Lr6k9/
Similarly, if the content is no longer long enough to not fit the view-port, the sidebar and content divs act as if they have no height assigned at all: http://jsfiddle.net/xsHHv/
So my question is how can I have the sidebar and content divs be the height of the view-port if the content doesn't stretch off the page, or have them the height of the content if it does?
The trick is to give your elements a huge padding-bottom, with a corresponding negative margin-bottom:
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
overflow: hidden;
}
#sidebar, #content {
float: left;
padding-bottom: 999em;
margin-bottom: -999em;
}
Here's your fiddle: http://jsfiddle.net/Lr6k9/4/
I need to create a page that has two divs. There is a bottom one of fixed height that must always be visible, no matter the size of the page. All the space above it (if there is any) should then be allocated to the other div which will contain a canvas. The canvas can be of varying height, large or small, depending on data and other conditions. If it's larger than the space allocated, I'd like to have a scrollbar appear
I'm getting close. I can get the bottom div to always be visible via position:absolute and bottom:0. But I can't get the behavior I'm looking for for the top div, which is to expand to fill the rest of the space above the fixed bottom but not beyond if the canvas is big.
Edit: here is the code:
.top {
height: 500px;
overflow-y: auto;
}
.bottom {
position: absolute;
bottom: 0;
height: 20px;
}
There is javascript later that generates the canvas in the top div; based on server side code, it can be of arbitrary height.
What I have above looks right, but I want to remove the height: 500px from the top div to have it expand to use all the remaining available space on the screen.
From what I understood you want a footer to be always visible and the content could be of varying height. What I would basically do is
// Create a padding to allow all content to be visible
body { padding-bottom: 5em; }
footer
{
// Move it to the bottom and fix it to the view
position: fixed; bottom: 0px;
// Give it its dimensions. Height should be the same or less than the body bottom-padding.
height: 5em; width: 100%;
}
Here is an example: http://tinkerbin.com/gF303DsM