I have a screen divided into 3 columns spanning the full height of the screen, I would like to have a scroll bar within each of the 3 sections, not one for the entire page. Everything I find suggested is with a fixed height of the container element. Is it possible to have this setup with a fluid dynamic height?
Thanks!
You can set to the 3 elements have the height of the screen, so it doesn't block the page scroll, and they fills the entire screen
.column {
height: 100vh;
overflow: auto;
}
Set the height of the elements to the height of the screen and overflow to auto using css:
height: 100vh;
overflow:auto;
Here's a jsfiddle: https://jsfiddle.net/h7qkcnw1/
hope that helps.
Related
In the following example, the div has the pre-defined height of: 300px.
The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.
I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.
Any ideas ?
The library we use fro the dropdown is:
https://github.com/mukeshsoni/react-telephone-input
An you can see here the default height of the dropdown non dynamic:
https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
Try this:
CSS
div { // change selector
height: auto;
}
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using #media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
I have a panel with a height of 100vh, so 100% of the screen (but height: 100% doesn't work, for some reason).
This panel must show a div with its own contents and the footer.
The footer is normally displayed under that panel, but in the front page it must be inside it, so I have to disable the normal one and call it inside the panel.
Thus, it must have position: absolute and bottom: 0.
Now the problem is that the footer takes its own height (which changes a bit when resizing the window's width), and the other div in the panel must take all the remaining height.
So, is there a way to set that div's height dynamically, rather than filling the CSS with media queries for each window width where the footer's height changes, setting it as height: calc(100vh - [footer height])?
Firstly, if you don't set height for parent elements, setting height in percentages on the child won't work. Your parent elements should have their height set to 100% (including html and body elements).
Secondly, if your browser support is IE10+, I recommend using flexboxes.
Here's how you do it (without browser prefixes):
.parent-container {
height: 100%;
display: flex;
flex-direction: column;
}
This will set the parent container as flexbox and change its direction to "column" (so its children stack one under the other).
.expanding-child {
height: 100%;
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1;
}
This is the wrapper for your content. It will expand as much as it can, keeping in mind your footer's height.
.sticky-child {
flex-basis: auto;
flex-shrink: 0;
flex-grow: 0;
}
This is your footer that will now always be at the bottom, pinned, without overlapping the scrollable content.
Here is what your HTML would look like:
<div class="parent-container">
<div class="expanding-child">
</div>
<div class="sticky-child">
</div>
</div>
And I made a quick fiddle to demonstrate it here
This will work as intended only if you set height to 100% on all parent elements.
Edit: here is a good source to learn more about flexbox, I recommend looking into it. And here is one I used when I first started using flexbox.
I think you are asking about sticky footer. I hope it will helps you. Always footer fixed at bottom using FlexBox
Fiddle
I got a div which is of fixed width and height:
#containersimg
{
width: 900px;
height: 135px;
}
And I have many images inside, with width 90px and height 120px. So i want to have my images all in a row, and show only horizontal scroll bar to scroll through the images.
I need to make this work in both FF and IE8 and above. I tried the overflow-x and overflow-y but I didn't helped.
Any idea?? Hope can get some help here... thanks...
You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scroll on the container. I've mocked up a quick fiddle to demonstrate. http://jsfiddle.net/vUEYG/
Give this a go :)
-ms-overflow-x: hidden;
Taken from this great resource CSS div element - how to show horizontal scroll bars only?
you can add first overflow:auto
#containersimg
{
width: 900px;
height: 135px;
overflow:auto;
overflow-x:hidden;
}
may help you
On this page, I want the main content div - which has an id value of container - to be horizontally centred on the grey background. However I want the black login panel to remain stretch across the entire width of the screen.
In an effort to achieve this, I added the rule:
#container {
margin: 0 auto;
}
But it doesn't work, what am I doing wrong?
Update
Thanks for the answers. It was suggested that I fix the problem by removing the max-width from the body and setting a width on the container.
This centres the container, but causes it to occupy all the available horizontal space. What I want is for the container to be centred with a width of (say) 900px, and the grey background should appear in the "empty" space on the left and right of the container.
you need to specify a width, otherwise the margin won't know how to centre...
like this:
#container {
width: 960px;
margin: 0 auto;
}
EDIT:
Also, remove the max-width on your body!!
The issue is that you have max-width: 960px; on your body element. Non-absolute elements will not size past the boundaries of their parent element.
You should instead be setting max-width (or better width) on the #container element, otherwise the div will automatically size to 100% as it is a block-level element.
Ok so I have a div that contains a few forms that have dynamically generated content. There are categories, that if you click on, slide/toggle down to reveal that categories sub-contents, or projects. Right now, I have it setup so that if the height of the div expands to exceed a set amount, a scroll bar shows up at the side, and the user can scroll down and see the content.
NOW I am being asked to get rid of the scroll bar, and just have the div's border (which is just 1px set in the css) height adjust dynamically with the height of the div's content...can I even do that? Is there some sort of jquery animation that would allow that? A point in the right direction would be greatly appreciated!! Thanks
You now probably have a height set on the container div:
#container {
height: xxpx;
overflow: scroll;
}
Just change that to a min-height:
#container {
min-height: xxpx;
overflow: visible;
}
The div will be at least xx pixels, and grow to fit after that.