Avatar of tuchfeld
tuchfeld
 asked on

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
Chat / IMCSSResponsive WebBootstrap

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

Bootstrap 4 using the Flex classes
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;
}

Open in new window

HTML
<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 &copy; 2020
  </footer>
</div>

Open in new window

Working sample here
Jim Riddles

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.
.container-two {
	max-height: 100%;
	margin-bottom: 30px;
	overflow: auto;
}

Open in new window

Screenshot_2020-01-30-13-42-27.png
SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
tuchfeld

ASKER
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).
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
tuchfeld

ASKER
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.
Jim Riddles

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.
tuchfeld

ASKER
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Jim Riddles

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.
tuchfeld

ASKER
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.
Julian Hansen

But still, now, when I shrink the height of the Browser, at some position, container-one get's also shrinked along with container-two
That 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
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
tuchfeld

ASKER
still. the current solution has a problem that container-one takes 80px even when it has less content.
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
tuchfeld

ASKER
greate Julian, you did it! Thanks!..
tuchfeld

ASKER
Thank you All for assisting me
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

You are welcome.