Looking for a Css/Bootstrap (Web Responsive) skeleton for my page. Please see the attached diagram with explanations
Hi, I'm looking for a Css/Bootstrap (Web Responsive) skeleton for my page.
Please see the following diagram with explanations:
![A diagram describing what I need]()
Please see the following diagram with explanations:
Bootstrap 4 using the Flex classes
Something like
CSS
Something like
CSS
header {
height: 50px;
}
footer {
height: 32px;
line-height: 32px;
font-size: 11px;
margin-top: -32px;
}
.container-one {
max-height: 80px;
overflow: auto;
}
.container-two {
max-height: calc(100vw - 162px);
overflow: auto;
}
<div class="d-flex flex-column h-100">
<header class="text-center bg-dark text-white">
<h1 class="d-flex"><span class="flex-grow-1">Header</span><button class="btn btn-sm btn-primary" id="toggle">Toggle Content</button></h1>
</header>
<section class="container-one flex-grow-1 bg-secondary">
Section 1
</section>
<section class="container-two flex-grow-1 bg-primary text-white">
Section 2
</section>
<footer class="bg-primary bg-dark text-white">
Copyright © 2020
</footer>
</div>
Julian,
Brilliant solution, as always. When viewing your sample page on my mobile device, it does not appear to take up the entire available height. Additionally, the 2nd section, with content enabled, overflows over the footer on mobile and desktop views. It appears from the drawing above that the author is looking to keep the footer visible.
Why did you use the calc() function rather than simply 100% for max-height? I'm certain that there is a valid reason, but I can't think of how it is a better choice. Making the following changes seems to correct the view on the desktop. I did not test on mobile.
Brilliant solution, as always. When viewing your sample page on my mobile device, it does not appear to take up the entire available height. Additionally, the 2nd section, with content enabled, overflows over the footer on mobile and desktop views. It appears from the drawing above that the author is looking to keep the footer visible.
Why did you use the calc() function rather than simply 100% for max-height? I'm certain that there is a valid reason, but I can't think of how it is a better choice. Making the following changes seems to correct the view on the desktop. I did not test on mobile.
.container-two {
max-height: 100%;
margin-bottom: 30px;
overflow: auto;
}
@Jim,
To be honest I threw together a skeleton in a hurry.
The calc was because I interpreted the spec as the page being (in total) 100vh with the header taking up a fixed amount, the footer a fixed amount the first section max 80px and the second section to fill the remaining screen space with overflow so it scrolls.
The idea is that the footer is always visible irrespective of how much content there is in section 2.
,
... and having said all that on checking I see I made my usual dyslexic mistake of using vw when I meant to use vh,
... and (again) n testing your max-height suggestion - that actually works better (nice catch)
Updated CSS here
Updated sample here
To be honest I threw together a skeleton in a hurry.
The calc was because I interpreted the spec as the page being (in total) 100vh with the header taking up a fixed amount, the footer a fixed amount the first section max 80px and the second section to fill the remaining screen space with overflow so it scrolls.
The idea is that the footer is always visible irrespective of how much content there is in section 2.
,
... and having said all that on checking I see I made my usual dyslexic mistake of using vw when I meant to use vh,
... and (again) n testing your max-height suggestion - that actually works better (nice catch)
Updated CSS here
header {
height: 50px;
}
footer {
height: 32px;
line-height: 32px;
font-size: 11px;
margin-top: -32px;
}
.container-one {
max-height: 80px;
overflow: auto;
}
.container-two {
max-height: 100%;
overflow: auto;
}
Updated sample here
Hi all, thanks for the responses.
But when I test it, there seems to be a problem: when you change the height of the browser the container-one height gets also relatively changed, while I asked that it should stay fixed (maximum 80px).
But when I test it, there seems to be a problem: when you change the height of the browser the container-one height gets also relatively changed, while I asked that it should stay fixed (maximum 80px).
oh, I found a solution:
by adding:
height: 100%;
to
.container-one
But still, now, when I shrink the height of the Browser, at some position, container-one get's also shrinked along with container-two.
Here is my Html test file: test_layout.html
Please advice.
by adding:
height: 100%;
to
.container-one
But still, now, when I shrink the height of the Browser, at some position, container-one get's also shrinked along with container-two.
Here is my Html test file: test_layout.html
Please advice.
You stated a max height, where I think you meant a min height for container 1. Try adjusting the CSS to min-height for that container.
no Jim, I think min-height is not appropriate for container-one.
As I said in my initial question, it's height should be as much as it contains UP TO max-height.
As I said in my initial question, it's height should be as much as it contains UP TO max-height.
Okay, well that is pretty much what Julian's solution does now. Except that you just said max-width, but I think you meant max-height.
If you set a max-height, but not a min-height, then it is possible for the container to shrink if there is not enough content to fill it to the max.
If you just want the height of container 1 to always be 80px then just specify the height as 80px. I do not fully understand your requirements, I think.
If you set a max-height, but not a min-height, then it is possible for the container to shrink if there is not enough content to fill it to the max.
If you just want the height of container 1 to always be 80px then just specify the height as 80px. I do not fully understand your requirements, I think.
right, I misswrite and fixed it, I'll say it again: container-one height should be as much as it contains (not more) and UP TO max-height: 80px.
But still, now, when I shrink the height of the Browser, at some position, container-one get's also shrinked along with container-twoThat happens at around 315px - realistically is this going to be a problem in the real world? Are there devices that are that small and if so are they not going to be having other issues with the content at that size?
The reason it is happening is because you have set a max-height on container one.
Not related by I see you added flex-grow-1 to container 1 - the idea is that you want container 2 be the one with the variable height which is why it has flex-grow-1 (fill available space) - container 1 is already height constrained so it does not need the flex-grow-1 style
still. the current solution has a problem that container-one takes 80px even when it has less content.
This should fix both issues
Added flex: 0 0 auto to container 1 and removed the flex-grow-1 style from this container
Updated sample here
header {
height: 50px;
}
footer {
height: 32px;
line-height: 32px;
font-size: 11px;
}
.container-one {
max-height: 80px;
overflow: auto;
flex: 0 0 auto;
}
.container-two {
max-height: 100%;
overflow: auto;
}
Added flex: 0 0 auto to container 1 and removed the flex-grow-1 style from this container
Updated sample here
Premium Content
You need an Expert Office subscription to comment.Start Free Trial