We help IT Professionals succeed at work.

Looking for a Css/Bootstrap (Web Responsive) skeleton for my page. Please  see the attached diagram with explanations

tuchfeld
tuchfeld asked
on
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
Comment
Watch Question

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 RiddlesPrepress/OMS Specialist

Commented:
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
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
@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
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;
}

Open in new window


Updated sample here

Author

Commented:
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).

Author

Commented:
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 RiddlesPrepress/OMS Specialist

Commented:
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.

Author

Commented:
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.
Jim RiddlesPrepress/OMS Specialist

Commented:
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.

Author

Commented:
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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Author

Commented:
still. the current solution has a problem that container-one takes 80px even when it has less content.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
This should fix both issues
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;
}

Open in new window


Added flex: 0 0 auto to container 1 and removed the flex-grow-1 style from this container

Updated sample here

Author

Commented:
greate Julian, you did it! Thanks!..

Author

Commented:
Thank you All for assisting me
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.