I know it's shaky to get a full screen height div without using client-side scripting, but what about this: assuming my div is tall enough to reach the bottom, how do I make it reach the VERY top and bottom, without the little extra space at top and bottom? I've tried adding top and bottom margins (and even padding) of 0px, but it doesn't seem to work.
#container {
height: 1000px;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
Try this:
html, body {
height: 100%;
}
#container {
height: 100%;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
change height: 1000px; to height: 100%;
Related
I have fiddle in which I want to replace the white space from the bottom with different background color.
The background-color which I want is #F5F5F5.
Problem Statement:
I am wondering what changes I should make in the CSS codes in the fidle so that I am able to replace white space from the bottom with the background color: #F5F5F5
I tried changing margin: 0 auto 100px; to margin: 0 auto 0; from the fiddle but for some reasons I am still white-space at the bottom on the web-page.
You can set this background color on
html {
background-color: #BFBFBF;
height: 100%;
}
The major problem is with the .form change margin: 0 auto 100px; to margin: 0 auto; in .form class and add min-height: 100vh to .login-page class like this.
You can checkout the update in fiddle here https://jsfiddle.net/nc2djn5p/241/
.login-page{
min-height: 100vh
}
.form {
background: #FFFFFF;
width: 500px;
height: 500px;
margin: 0 auto;
box-sizing: content-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
1) Remove lines from CSS:
Line 1: // General CSS
Line 328: // End General CSS
Because // is not valid CSS comment and causes first definitions after them to be invalid.
2) The problem is the .form class:
.form {
background: #FFFFFF;
width: 500px;
height: 500px;
margin: 0 auto 100px;
box-sizing: content-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
The line: margin: 0 auto 100px; creates a margin-bottom of 100px which is creating that empty space.
Instead you can put a padding bottom to your page:
.login-page {
background-color: #BFBFBF;
padding-top: 25px;
padding-bottom: 100px;
}
3) For larger screens where the content doesn't fill the whole height of the window:
html, body {
height:100%;
background-color:green;
}
4) Another problem, the style.css is linked BEFORE boostrap.css in your html which is resetting the html and body background color, so put your style.css link AFTER boostrap and my solution will work.
So I guess the main question here is can I keep everything under my header nav bar that's in a fixed position but if I need to scroll it goes under my header? Here is a fiddle of me just setting the margin-top of the hr tag but after trying it on different screen sizes it just doesn't work and over laps on smaller screens.
https://jsfiddle.net/RVKuzmik/se0etqew/3/
Code here
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 1%;
padding-top: 1%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
hr {
margin-top: 10%;
}
<header>
<nav>
<ul>
<li>Campus</li>
</ul>
</nav>
</header>
<hr>
try to add position fixed to your form this will work
You are setting a percentage value as the margin-top on the hr element. The thing with percentage values is that it changes as the viewport changes, so on a smaller device the 10% value may not be the same as it is on a large computer screen.
Since your navbar is going to stay the same height (with fixed elements on top it is always a good idea to know beforehand what's the maximum height the element will be at any given point).
Instead of giving hr tag a margin-top value, I would suggest you setting a margin/padding-top value on the top container of the elements that are in a scroll-able view and not fixed.
By default it will be the body element where your elements positioned normally and the fixed header / navbar is, so let's do it on it.
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
body {
/* The height of the header is around 70px (give or take) at most of the screens, since you are using percentage value for the padding-top and bottom of it */
margin-top: 70px;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 1%;
padding-top: 1%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
https://jsfiddle.net/00w0cng6/
Or even better, to make sure things look right on every device, you either use responsive media queries to set different values for certain screen sizes or just one fixed height for your fixed element.
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
}
body {
/* 70px because that's the max our fixed element is going to be */
margin-top: 70px;
}
header {
top:0;
position: fixed;
width: 100%;
/* Padding top, bottom and the height of the header sums up to 70px */
padding-top: 10px;
padding-bottom: 10px;
height: 50px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
}
https://jsfiddle.net/RVKuzmik/se0etqew/3/
**CSS**
html,
body {
padding: 0;
margin: 0 auto;
text-align: center;
background-color: #ffffff;
width: 100%;
padding-top: 60px;
}
header {
top:0;
position: fixed;
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
height:80px;
}
**HTML**
<header>
<nav>
<ul>
<li>TEST</li>
</ul>
</nav>
</header>
<hr>
Just give the header a background:color:white;position:sticky And it will work fine..
What is happening is that the header has a background color which is transparent and position is fixed....This will work fine..
You can make use of position: fixed
for example:
Here's the code
I'm working on a site and I can't figure out white there is whitespace showing up. I have my page wrapper div and everything else set to width: 100%; My header and footer and using the full width of the screen, but my other content isn't using all the width of the page. I think it has something to do with positioning.
Also, my jsfiddle is screwing up my header. I'm using PHP for that and it's working fin on my machine. Please ignore that.
Fiddle:
http://jsfiddle.net/WH5jZ/
.pageWrapper {
width: 100%;
height: 700px;
margin: 0 auto;
}
#mainPage {
width: 100%;
background-image: url('http://i34.photobucket.com/albums/d101/Lee45276/food1_zps6cb55c3d.jpg');
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
}
EDIT: I figured it out but I cannot post an answer:
I figured it out. I had to remove the padding in the nav and footer.
old
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
padding: 1% 2.5%;
}
new
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
}
If you are referring to the main body content
ORIGINAL
/***************
CONTENT
***************/
.contentDiv, #bulkdel {
width: 95%;
height: 400px;
padding: 10px;
margin: 5% auto 0;
background-color: rgba(0, 0, 0, .8);
text-align: center;
}
Your width is set to 95% that is why its not using 100%
Change it to
/***************
CONTENT
***************/
.contentDiv, #bulkdel {
width: 100%;
height: 400px;
padding: 10px;
margin: 5% auto 0;
background-color: rgba(0, 0, 0, .8);
text-align: center;
}
Other than that I think everything else looks fine on your page
It appears as if you have added padding to the footer which is pushing it out past the rest of the content. I'm sure removing the padding will solve your problem.
EDIT:
I see you updated your question with the answer.
In other words, change this:
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
padding: 1% 2.5%; /* remove this */
}
to this:
nav, footer {
background-color: rgba(0, 0, 0, .8);
width: 100%;
}
I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.
This is my CSS code for the div:
#section_title {
background-color: #2b65ae;
border-radius: 10px;
color: #ffffff;
padding: 5px 30px 0px;
background-size: 100% 100%;
font-size: 24px;
min-width: 200px;
height: 30px;
text-align: center;
font-style: italic;
margin: 0 auto;
text-transform: uppercase;
-moz-box-shadow: inset 0 0 8px #444444;
-webkit-box-shadow: inset 0 0 8px #444444;
box-shadow: inset 0 0 8px #444444;
}
You may use display:table properties to achieve this :
Update your CSS with :
display:table;
width: 200px;
DEMO , using just words and white-space to keep all on one line for the demo purpose.
You can use this
div {
float: left; /* or right according to your requirement */
width: auto;
min-width: 200px;
max-width: 100%;
}
This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.
Try like this:
#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;
}
Updated fiddle
If it's just for one line of content, then you can add a float to your css.
#section_title {
min-width: 200px;
height: 60px;
background-color: rgb(14,87,145);
float: left;
}
Example fiddle here.
I have one article tag, inside a php code that generate articles from wordpress. They are not all the same height ofc, it depends on the content. They are organised in two columns by float.
If a article in the first line is not the same height as the other one in the same row, the second row is aligned to the bottom of the biger div. Now I want to align them without any spacing.
Here is some css:
#container {
width: 1000px;
margin: 0px auto;
}
article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
Edit jsFiddle (now with content to demonstrate the problem): http://jsfiddle.net/4PMj5/6/
You can use even and odd chilren pseudo selection in your CSS.
article:nth-child(even) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: right;
}
article:nth-child(odd) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
The result will be like: this updated fiddle.