I have a CSS grid layout for a webapp, with a fixed-size header and footer (defined with rem units), and an expandable center row (defined as 1fr) that contains two sidebars and a central content area. The outer grid container is defined with a width and height to fill up the viewport (100vw/vh). I want the center row to take up all the space between the header and footer, and for any overflow to scroll, rather than to expand the height of the page.
I've tried various possible solutions, including using overflow-y:scroll, but nothing seems to work. The extra content makes the page longer, rather than making the region scrollable.
I don't want to use a fixed size for the center row, because I want it to expand to fit arbitrarily large screens.
Here's a fairly minimal example of my layout:
https://codepen.io/Shepazu/pen/EwePgB
(Please note that the nested areas in the HTML and CSS are intentional, so any solution should be CSS only, and shouldn't change the HTML markup.)
Assuming the fixed height of header and footer is 100px, then give the style to the content area:
.center-row {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
Related
I've added an image below which better details the model of my webpage.
I have a page that is a part of my Angular application. Within the application I have a mat-card, and within that card is a mat-table which may display a long list of data.
The list of data sometimes causes the height of the mat-card to be extended past the lower boundary of the page, and since the page isn't scrollable there is an amount of rows that will be unaccessible by the user.
I want to be able to fix the size of the mat-card to be the height of the page minus the height of the header, so that the mat-card fills all of the remaining vertical space on the page.
We're making use of bootstrap, so the mat-card is contained inside of a col-8 class.
Is there a way that I can set the height of the card to be the remaining height on the page, and then cause any overflow within the body of the table to be scrollable?
I've attempted to set overflow-y on the mat-table to scroll, but all that happens is the scrollbar appears but doesn't offer the ability to actually scroll.
The issue here is that the height of the mat-card varies, so if the container holding the table is height: 100%, it'll take up as much height as it requires to display the full length of the table. I need to force the card height to only take up the visible available height, and not the height it needs to display the table. Something like height: 100% available width
Try this.
As I wrote in the comments you can have your content container being display: flex; flex-direction: column, then you card would be flex: 1; min-height: 0; overflow: auto and you can then make your table: min-height: 100%.
I am creating an Angular application with Bootstrap and i stumbled on a problem. I am trying to size one of my divs in the page where the height is fullscreen, however i have a navigation bar and one other element above this div (i am also using padding from the above element). I want my div to be exactly right height to fit from the last element to the bottom of the page.
Now the problem is, when I set style of my div to 100vh the site doesn't fit and i get a slider to scroll through the whole page. Is this because vh doesn't take the navigation and the other element into account and just set my div to default screen size? And how to correctly repair this problem that it will work the same across any screen?
There are several approaches to get your div the height you're looking for.
Use the calc css function. It should be something like this:
div {
height: calc(100vh - 60px);
}
Replace the 60px with the pixel size of your navigation element.
[Alternate solution] Use flexbox css styles. You'll need to use a column flexbox setup and flex: 1 on the element you'd like to take up the remaining height.
You can have a container div of 100vh. And inside it your nav bar will be sticky-top in a child div. And your other child div is the parent of your content.
I have a pretty simple two column layout where the left column is for main content and the right column is a sidebar, which contains some 300x250px ads. My issue is that I want the sidebar to always be the same width so that it won't cut off my ads (they can't be resized). However, I'm finding it difficult to achieve this using susy. Below is a screenshot of the layout.
Any ideas?
What you are describing doesn't need a layout frameworkâa floating div with a width will make the sibling be fluid. You could be more explicit with CSS calc: https://css-tricks.com/a-couple-of-use-cases-for-calc/
width: calc(100% - 300px);
I'm trying to design a page layout that has a couple of headers, some main content, and a footer.
I want to use jQuery UI tabs widget in the main content with a border around it, so the div MUST fill all the space between the headers and footer, but also I want the content to expand if needed, off the bottom of the screen and a scrollbar appear so I can scroll down and view it.
Effectively, I want the minimum height of the content div to be the distance between the header and footer, but allow it to expand.
I've implemented the Sticky Footer method, which would work really nicely if I didn't want a border around my main content. In this jsFiddle example the div with the red 2px border needs to initially fill the page, and when you click the "Add Stuff" button to add more content which goes off the bottom of the screen it needs to push the footer down and show a scrollbar.
This is what I'm trying to achieve:
...with these rules:
Content needs to have a border.
Content needs to start off by filling the space between header and footer.
Content needs to grow beyond the bottom of the page, showing a scrollbar.
Footer needs to be pushed down as content grows.
Use only CSS, so that if content changes dynamically, everything adjusts automatically.
Work in modern browsers only, I'm not interested in supporting IE<8.
I've tried:
Absolute positioning, but this fixes the content to the size of the screen and doesn't allow it to expand past the bottom.
jQuery positioning, but this feels too much like a hack, and seems to be a bad way to fix it.
Using height: 100% and min-height: 100% in various places, but doesn't seem to achieve what I want.
Looking at other Stack Overflow questions around the same problem, but none of them seem to account for the content growing beyond the bottom of the screen.
Best I could come up with is http://jsfiddle.net/Atjxc/6/
Because the height of the window is variable, I had to use percentages only, along with absolute positioning.
.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}
I added a container for the main part, which shows a scrollbar when the content gets too long. I couldn't put borders because they have to be set in px values, and it messes up my percentage-based heights.
Well, You could just measure the actual distance that is between the header and footer, then set the min-height to that exact px.
like for eg, the distance between is 600px,
then set
min-height:600px;
height:100%
In this way, when you have content that fits way under min-height eg. 600px then the height shall be 600px, now when the content is added and it grows out of the 600px height, then the container div shall elongate in height to accommodate the added content which is covered by height:100%; .
And yeah, you can use "Measure It"(its a chrome/firefox extension) to measure the onscreen distance on the fly, its more convenient.
Hope this helps, and heres the jsfiddle http://jsfiddle.net/Atjxc/11/
I want to build a fluid template where there is a content container with fixed margin on all 4 sides of the web page. If browser is resized, content box would change on all sides too keeping the same margins but changing height and width. Because of the height 100% issues I am not able to get the bottom margin correctly done if content is too long. In my case content just stretches without stopping and adding scrollbars.
See example:
http://jsfiddle.net/QzgHm/1/ (section element needs to keep bottom margin)
Try position: absolute; and then define pixels values for top, bottom, left, and right. This will essentially give you your set margin all the way around. I couldn't tell on your example which div or section you wanted these margins set on, so just be sure to use position: relative on the parent element