I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}
Related
I have the following layout which is a alteration of the AdminLTE boxed layout template:
HTML
<div class="wrapper">
<div class="header">
Header
</div>
<div class="leftbar">
Left bar
</div>
<div class="content-wrapper">
<div class="content">
Content
</div>
<div class="content-rightbar">
Right bar
</div>
</div>
<div class="footer">
Footer
</div>
</div>
CSS
body {
background-color: lightgray;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
.wrapper {
overflow: hidden;
background-color: #222d32;
max-width: 600px;
margin: 0 auto;
min-height: 100%;
position: relative;
height: 100%;
}
.header {
position: relative;
height: 30px;
z-index: 1030;
color: white;
background-color: #367fa9;
padding: 2px;
}
.leftbar {
color: white;
background-color: #222d32;
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
min-height: 100%;
width: 100px;
z-index: 810;
padding: 40px 10px 10px 10px;
}
.content-wrapper {
margin-right: 100px;
margin-left: 100px;
background-color: #ecf0f5;
z-index: 800;
}
.content {
min-height: 200px;
padding: 10px;
margin-right: auto;
margin-left: auto;
}
.content-rightbar {
right: 0;
min-height: calc(100% - 30px);
position: absolute;
background: #f9fafc;
border-left: 1px solid #d2d6de;
z-index: 1010;
top: 0;
width: 100px;
text-align: right;
padding: 40px 10px 0 10px;
}
.footer {
background: #fff;
border-top: 1px solid #d2d6de;
margin-left: 100px;
z-index: 9999;
height: 30px;
padding: 2px;
}
Codepen
https://codepen.io/kspearrin/pen/QqBrpB
Result
Problems
This looks precisely how I would like it to with one problem:
Overflowing the leftbar and content-rightbar with content causes the overflowed content to be hidden. Height is only determined by the content inside content.
Examples:
Question
How can I make it so that the either the entire layout's height within the body increases with the content of the content, leftbar, and content-rightbar - OR - that the leftbar and content-rightbar scroll with their overflowing content?
You have set your overflow to hidden for your wrapper, you can just set it to "auto" or "scroll" to show the content inside your container. Only then it will take it will be longer then your content container and then it will take in the whole width because there are no other elements right there.
I would in fact recommend you to reconsider using flex box as it will keep your elements at the same height and will prevent all the overflow issues you have right now.
If you are unfamiliar with flex boxes I can recommend you https://css-tricks.com/snippets/css/a-guide-to-flexbox/ at the end you will find an example for a multi column layout which includes all the elements you need for your project.
Also another tip: You could use an unordered list for your sidebar items, as this is the most common way to do it.
ul {list-style: none;}
<ul>
<li>Left bar</li>
<li>Left bar</li>
<li>Left bar</li>
</ul>
Background: On small screens when the keypad is up and the footer sits on its top then it covers the input fields in the content area.
Here are the requirements (some borrowed from [here][1]):
The footer should be visible if the content above it is shorter than the user’s viewport height.
If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.
This must be done without JavaScript
The header must be fixed at the top
The most important part is only the content can have a scroll-bar if necessary
It has to work on Android 4.x, IOS >=7.1 WebView, WP8.1 Web Browser element
This is how I make the content scrollable now while putting the footer to the bottom.
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
Update1
This is what I could come up with so far.
http://jsfiddle.net/gfqew5un/3/
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
It's close to my final goal but the problem with this solution comes up when the content is longer than the viewport. In that case the footer goes out of the screen but I want it to stay at the bottom while the content gets a scroll-bar and stretches till the top of the footer. So a hard coded max-height on content won't work. I need something more dynamic.
You should use position:relative to make sure the footers position is right under the content.
if you use max-height to your content div in combination with overflow: auto the scrollbar appears.
This is the CSS code:
header{
height: 72px;
background-color: red;
position: relative;
left: 0px;
right:0px;
overflow: visible;
}
#content{
overflow:auto;
position: relative;
max-height:200px;
}
footer{
height: 50px;
background-color: black;
position: relative;
}
Link to JSFiddle
You can easily achieve this effect using flex option from CSS3.
HTML:
<header>
<h1>Your header</h1>
</header>
<div id="content-wrapper">
<div id="content">
Lorem ipsum dolor
</div>
<footer>
footer content
</footer>
</div>
CSS:
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
#content-wrapper {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
}
#content {
flex: 1;
}
footer {
height: 35px;
padding-top: 20px;
}
https://jsfiddle.net/puybgmps/
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I have an issue about HTML and CSS Layout. All i want on my website is a fixed left bar for navigation and a fixed top bar for messages.
I would like both the items to follow when the user scrolls down the page (fixed) but i have an issue telling the CSS i want the top bar to fill up the whole rest of the page width.
Using this HTML :
<body>
<div id="leftbar">
<img border="0" src="images/somelogo.png">
<p>leftbartest</p>
<p></p>
</div>
<div id="topbar">
<p>topbartest</p>
</div>
</div>
</body>
Consider both these CSS examples :
Bar is fixed and stay on page when scroll, but will not fill width and resize when browser window is resized (will fit text size):
body {
background-color: #A69E40;
}
html {
height: 99%;
width: 99,8%;
}
#leftbar {
position: fixed;
float: left;
margin-left: -8px;
margin-top: -8px;
background-color: #FFFFFF;
width: 272px;
height: 100%;
z-index: 2;
border: outset 2px #000000;
}
#topbar {
position: fixed;
float: left;
margin-left: 268px;
margin-top: -8px;
background-color: #FFFFFF;
height: 35px;
z-index: 5;
border: solid 1px #000000;
}
Bar is not fixed and will not stay on the page when scroll, but will fill width and resize when browser window is resized :
body {
background-color: #A69E40;
}
html {
height: 99%;
width: 99,8%;
}
#leftbar {
position: fixed;
float: left;
margin-left: -8px;
margin-top: -8px;
background-color: #FFFFFF;
width: 272px;
height: 100%;
z-index: 2;
border: outset 2px #000000;
}
#topbar {
margin-left: 268px;
margin-top: -8px;
background-color: #FFFFFF;
height: 35px;
z-index: 5;
border: solid 1px #000000;
}
It's meant to create some kind of portal where a table will be embed to the right of the leftbar and under the topbar. All in all the left bar should fit the whole height of the first 272 width pixels, the top bar should fit the whole width of 35 pixels height and the whole rest will be used to drop some tables.
Please detail, i am new to this wonderfull world that is HTML and CSS, and i would like to become solid in this field of modern technology.
Thanks again for reading this and thanks in advances for your brainstorm on my silly beginner problem.
Here's a CodePen demo.
Top bar on the top and left bar below it
HTML
<nav id="left-bar">
Left bar
</nav>
<header id="top-bar">
Top Bar
</header>
<article>
All your content goes here.
</article>
CSS
html, body {
margin: 0px;
padding: 0px;
background: #E4E4C5;
width: 100%;
height: 100%;
}
header {
position: fixed;
background: #8D2036;
width: 100%;
height: 35px;
}
nav {
padding-top: 35px;
position: fixed;
background: #B9D48B;
width: 272px;
height: 100%;
box-sizing: border-box;
}
article {
padding: 55px 20px 20px 292px;
width: 100%;
box-sizing: border-box;
}
Left bar stretching the entire height and top bar next to it
HTML
<header id="top-bar">
Top Bar
</header>
<nav id="left-bar">
Left bar
</nav>
<article>
All the content goes here...
</article>
CSS
html, body {
margin: 0px;
padding: 0px;
background: #E4E4C5;
width: 100%;
height: 100%;
}
header {
padding-left: 272px;
position: fixed;
background: #8D2036;
width: 100%;
height: 35px;
}
nav {
position: fixed;
background: #B9D48B;
width: 272px;
height: 100%;
box-sizing: border-box;
}
article {
padding: 55px 20px 20px 292px;
width: 100%;
box-sizing: border-box;
}
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.