EDIT: jsfiddle
I have set
html{
height: 100%;
}
And
body{
min-height: 108%;
}
I want to show the content to full height to the footer even if content is empty.
This is container
And this is content
You can fix this by adding height:100% in addition to the min-height:108% to you body element:
http://jsfiddle.net/C8UUt/1/
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
min-height: 108%;
height: 100%;
}
Update
To make the sidebar1 full height you can use a little trick:
http://jsfiddle.net/C8UUt/3/
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
min-height: 100%;
position: relative; // added this to tell position:absolute that this is his parent
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
display: inline-block;
height: 100%; // to make it 100% height
position: absolute; // added this so it will take `min-height` of parent into account
}
.content {
padding: 10px 0;
width: 780px;
display: inline-block;
/* float: left; */
height: inherit;
margin-left: 180px; // since position:absolute doesn't take part in the normal flow, we must account for that space manually
}
if your browser supports CSS3 use this:
.container {height:100vh;}
Related
My content div that overlaps the header div in my CSS code as per the attached image. Both the content and side-nav divs should be below the header section.
I tried changing the value of position property for the elements but it doesn't work. I also tried introducing top property to the content section to be as same as the side nav but it didn't work too
body {
font-family: "Lato", sans-serif;
font-size: 1.6rem;
line-height: 1.7;
font-weight: 400;
color: #777;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: orangered;
margin: 0;
max-width: 100%;
width: 100%;
}
#media only screen and (max-width: 75em) {
.container {
margin: 0;
max-width: 100%;
width: 100%;
}
}
.header {
font-size: 1.4rem;
height: 8vh;
background-color: #3394e3;
border-bottom: var(--line);
top: 0px;
position: fixed;
width: 100%;
/*
display: flex;
justify-content: space-between;
align-items: center;*/
}
.side-nav {
position: fixed;
margin: 0px auto;
height: 100%;
float: left;
top: 8vh;
clear: both;
background-color: #fff;
bottom: 0;
}
.content {
background-color: #f4f4f4;
min-height: 93vh;
width: 85%;
float: right;
}
.footer {
background-color: green;
height: 7vh;
width: 85%;
float: right;
color: red;
}
<div class="container">
<div class="header-fixed">
<header class="header">
</header>
</div>
<nav class="side-nav">
</nav>
<main class="content">
</main>
<footer class="footer">Footer</footer>
</div>
Your .header has a position:fixed which takes it out of the normal flow of a webpage. So since it is taken out (essentially placed on a different layer of the page flow), your content is relatively positioned in the normal flow. As the .header is taken out of the flow, the .content is technically the first item in the flow of the page now.
So you will just need to give the .content a margin-top that is equivalent to the height of your .header.
Your .sidebar also has a position:fixed, so it's on a different layer, so it doesn't care about where it is placed in relation to the .header. So that's why you had to manually position it and give it a top:8vh to put it 8vh down from the top of the window.
I'm using Firefox and want to create a div with height and width 100% and a white border with 10px. The right and bottom part of the border seems outside the div and body.
https://jsfiddle.net/tob6g805/
html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color: #ffb0a3;
overflow: hidden;
}
.div-with-border {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 10px;
border-color: #ffffff;
border-style: solid;
}
A workaround was to add border right and bottom and to decrease the width and height of the div... but this becomes especially problematic when resizing the page.
https://jsfiddle.net/1wtjkybm/
html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color: #ffb0a3;
overflow: hidden;
}
.div-with-border {
width: 95%;
height: 95%;
margin: 0px;
padding: 0px;
border: 10px;
border-bottom: 100px;
border-right: 100px;
border-color: #ffffff;
border-style: solid;
}
Thanks for any help.
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
There's a CSS property called box-sizing which allows you to adjust this property. Adding box-sizing: border-box to .div-with-border should fix this for you!
Take a look at the link above. They have a live example that demonstrates box-sizing.
Here's one solution using flexbox
body,
html {
height: 100%;
width: 100%;
}
body,
html,
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
width: 100%;
background-color: #ffb0a3;
display: flex;
justify-content: center;
align-items: center;
}
.div-with-border {
width: 90%;
height: 90%;
border: 10px;
border-color: #ffffff;
border-style: solid;
text-align:center;
font-size:7vw;
font-family:Open Sans;
font-weight:bold;
color:#d46a58;
}
Also, always do:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in the <head> tag.
I have tried a lot.
I do not get to 100% height without scrollbars:
/* =================== Global =================== */
*{
padding: 0px;
margin:0px;
}
html, body{
height: 100%;
background-color: #7a7a78;
font-size: 11px;
font-family: Verdana, sans-serif;
}
a{
color: #000;
text-decoration:none;
}
header{
max-width: 1000px;
margin: auto;
height: 75px;
background-color: #d0ccc9;
}
nav{
background-color: #964951;
height: 30px;
}
#nav{
max-width: 940px;
height: 30px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
}
section{
margin: auto;
max-width: 970px;
background-color: #d0ccc9;
padding-left: 15px;
padding-right: 15px;
height: 30px;
}
main{
margin-left:auto;
margin-right:auto;
max-width: 970px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #d0ccc9;
min-height: 150px;
height: 100%;
}
footer{
padding-left: 15px;
padding-right: 15px;
background-color: #964951;
height: 75px;
color: #fff;
display: flex;
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
footer a{
color: #fff;
text-decoration:none;
}
enter image description here
enter image description here
can someone tell me what I did wrong?
thank you
edit: sorry, I get the css code not inserted. always the same error although everything is correct
Without seeing the HTML code it's hard to judge, but your main element has height: 100%;. So if there are other elements outside the main element (which is very likely from your CSS), they will add to the height, which will make the overall height more than 100%, which again causes the scrollbars.
Addition after added link to picture of HTML code in comments:
It's as I wrote above: Above main there are header , nav and section, below it, there is the footer. According to the CSS you posted all this adds up to 100% PLUS 210px (210px is the sum of all other heights according to your CSS): There's the overflow that causes the scrollbar.
The solution: Apply height: calc( 100% - 210px) to the CSS rule for main (instead of the 100% height there)
I'm trying to set the margins to a text, however margin-right doesn't seem to work inside message.
Why?
css:
message
{
position: fixed;
display: block;
margin-bottom: 0px;
width: 100%;
height: 40px;
background-color: rgba(26, 119, 212, 100);
line-height: 40px;
font-style: italic;
text-align: left;
overflow: hidden;
}
.messageotext
{
width: 100%;
margin-right: 0px;
}
html:
<message><span class="messageotext">prova</span></message>
I want the text to be out the screen so I can translate it by scripting language from right to left.
You have given width:100% and the parent is fixed so it will not effect
If you remove your width:100% of span you will see margin-right
so you can add text-align:right to parent which will show the effect of margin-right or you can also use float:right
Demo - fiddle
Removed browser default styles by adding
*{
margin:0;
padding:0;
}
* {
margin: 0;
padding: 0;
}
message {
position: fixed;
display: block;
margin-bottom: 0px;
width: 100%;
height: 40px;
background-color: rgba(26, 119, 212, 100);
line-height: 40px;
font-style: italic;
text-align: left;
overflow: hidden;
text-align: right;
}
.messageotext {
/* width: 100%;*/
margin-right: 100px;
}
<message><span class="messageotext">prova</span>
</message>
You can modify your class messageotext with the following code:
.messageotext {
width: 100%;
position: absolute;
left: 100%;
}
Then you can decrease the value of left property to translate it from right to left.
Try using float:right
or you can also use only right:0px if position is absolute
This question would have been a duplicate of header and footer fixed, content scrollable and Fixed header, footer with scrollable content if not for one detail, which is very important for me - I do not want to specify a fixed height and width for the content.
http://jsfiddle.net/mark69_fnd/PWRDa/ contains a real form with dummy data, demonstrating the problem - resizing the window makes the scrollbars appear, but on the page, rather than on the form. In the current layout the menubar and the statusbar are scrolled out of view and I want them to remain fixed, while the form data gets scrolled.
Please, do not provide a solution with absolute width and/or height. I prefer calculating them in javascript, rather than baking them into the CSS, unless it is 100%. Of course, pure HTML/CSS solution is preferable.
Here is the CSS:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #eee;
}
.content {
background-color: #ddd;
padding: 0em 0em 2em; /* bottom padding for footer */
overflow: auto;
}
#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}
#status {
border: solid 1px #000000;
}
#status .error {
color: red;
font-weight: bold;
}
/* ------------------------------------------------------------------------------------*/
.char {
display: inline-block;
vertical-align: top;
}
.line {
white-space: nowrap;
}
/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
border: 2px groove threedface;
margin-top: 1em;
}
.fakeFieldset {
padding: 2px;
}
.fieldset > div.legend:first-child {
display: inline-block;
text-align: left;
margin-left: 10px;
background: #ddd;
position: relative;
top: -0.7em;
}
.merge-bottom {
margin-bottom: -2px;
}
/* ------------------------------------ Forms ------------------------------*/
form div {
white-space: nowrap;
}
form select, form input {
margin: 2px;
border: 1px groove;
}
form label:not(.same-line) {
width: 8em;
text-align: right;
display: inline-block
}
#cust-balance {
text-align: center;
}
.ccExpDate {
width: 2em;
}
#cust-salutation {
width: 4em;
}
.postalCode {
width: 7em;
}
#cust-ccAddress {
width: 20em;
}
// Updated with input from asker.
This works great. Mine have widths set to 100%, but of course you can do that in JS if you want.
You need to give the header and the footer position:fixed
I also put some padding in the .content div to make room for the top header.
Like the following:
html, body, .yui3-app-views {
height: 100%;
width: 100%;
}
.content {
background-color: #ddd;
padding: 2em 0em; /* padding for footer and header */
}
.menubar {
position: fixed;
top: 0px;
width: 100%;
z-index:1;
}
#footer {
position: fixed;
width: 100%;
bottom: 0; /* stick to bottom */
background-color: #ccc;
}