Here is the JS fiddle I made: http://jsfiddle.net/K6CFU/
The structure is the exact same I'm using for my website but the problem is that I'm not getting the middle section of my site to be 100% high. Right now it's the content that determines how tall it is.
<body>
<div id="page-container">
<header></header>
<div id="page-wrapper">
<div id="page-content">
</div>
</div>
<footer></footer>
</div>
</body>
html, body { height: 100%; padding: 0; margin: 0; }
header { width: 100%; height: 50px; background-color: red; }
footer { width: 100%; height: 50px; position: absolute; bottom: 0; background-color: green; }
#page-wrapper { width: 1024px; margin: 0px auto; background-color: yellow; }
#page-content { height: 100%; background-color: pink; }
Not 100% sure I know what you mean but have you tried adding height:100% to the page-wrapper div?
#page-wrapper{
height:100%;
width: 1024px;
margin: 0px auto;
background-color: yellow;
}
I've ran into this problem in the past. The way that I see it is that when you specify height: 100%;, it fills to 100% of the div (or whatever element) - but not to the screen size. I've always had to use min-height somewhere to get similar results that you're seeking.
For the body or probably for your page-wrapper div, try specifying min-height: 500px; (or whatever you feel is an appropriate size.
Make the page-container
height: 100%;
so that the object inside know the size of the box.
than you can make the page-wrapper
position: absolute;
bottom: 50px;
top: 50px;
height: auto; /*can also be left away*/
now the middle part will be between the footer and the header
http://jsfiddle.net/K6CFU/5/
you can make the page-content
height: 100%;
or you can leave it away, like you want.
Related
i am Currently working on a Angular 2 Website.
I wanted to have a Landing section which covers the Full screen, a content Section, which is as large as the Content inside and a Footer at the Bottom as well as a navbar that stays always on top.
I'm more of a Backend-Developer, so CSS is not my biggest Strength.
My Current code for Testing is:
Global CSS:
html, body {
margin: 0px;
padding: 0px;
width: 100vw;
height: 100vh;
}
App-Component HTML and CSS:
<app-home></app-home>
<header>
Test
</header>
.
header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
color: white;
background-color: rgba(0, 0, 0, 0.8);
}
And my Home-Component HTML / CSS:
<header></header>
<div class="content"></div>
<footer></footer>
.
header {
position: relative;
width: 100%;
height: 100%;
background: blue;
}
.content {
position: relative;
width: 100%;
height: 500px;
background: red;
}
footer {
position: relative;
width: 100%;
height: 50px;
background-color: yellow;
}
The Problem i Currently have is, that all my Containers are about 10px wider that the screen. Because of this there is a Horizontal Scrollbar at the bottom.
The weird thing is that this Problem only occurs when i add the content or footer section. When i only have the header Everything is fine.
Also the Navbar stays in the correct size.
Image of the Problem
Probalby it's just a stupid small mistake, but even with other solutions from Stack Overflow i tried it is still not working.
I appreciate all your Help!
just change width to 100% from width: 100vw for body; Like below:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100vh;
}
I need to create a page where I would have a 100% wrapper between header and footer elements. The wrapper is a general content view where I will be adding templates. Apart of having the wrapper 100% height I need to have a first section in the wrapper also with 100% height.
The main problem is that I cannot position the footer relatively after the wrapper. It stays somewhere in the middle. See fiddle for example.
HTML
<header ui-view="header"></header> <!--Fixed Height/Relative-->
<div id="wrapper" ui-view="wrapper"> <!--100% Height/Relative-->
<section></section> <!--100% Height/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
</div>
<footer ui-view="footer"></footer> <!--Fixed Height/Relative-->
CSS
body{
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html{
height: 100%;
}
div{
position: relative;
height: 100%;
width: 100%;
}
section:first-child{
height: 100%;
}
section{
position: relative;
display: block;
height: 400px;
width: 100px;
border: 1px solid black;
}
header{
position: relative;
height: 100px; width: 100%; background: red;
}
footer{
position: relative;
height: 100px; width: 100%; background: red;
}
JSFiddle
I believe the div you have around your sections is what's causing you some trouble. Check out the snippet below. If you place only your first section and the header in that div, you can accomplish what you want by putting height 100% on that div.
Note that without that div, your :first-child pseudo selector won't work because that section is no longer the first child of it's parent (header is). So I added an ID to it simply so I can reference it in the CSS.
So now the div is 100% of the height, header is a fixed height, and section1 is at 100% filling the remainder of the div.
body{
margin: 0;
padding: 0;
height: 100%;
background:green;
}
html{
height: 100%;
}
div{
height: 100%;
width: 100%;
background: pink;
}
section {
display: block;
height: auto;
width: 100%;
border: 1px solid black;
}
section#section1 {
height: 100% !important;
}
header{
height: 50px; width: 100%; background: red;
}
footer{
height: 50px; width: 100%; background: blue;
}
<div>
<header></header>
<section id='section1'>section1</section>
</div>
<section>section2</section>
<section>section3</section>
<footer></footer>
The height:100% you have set on the body is what's causing your footer element to be in the middle of the page. Remember that '100%' is '100% of your window height', so be careful with that. Cheers.
I have a website made of "pages" (100% height on visible area). Please look at the following css:
html {
height: 100%;
}
body{
height:100%;
margin: 0 auto;
}
.page{
height: 100%;
margin: 0 auto;
min-height: 700px;
min-width: 1024px;
}
.content {
margin: 0 auto;
text-align: center;
height: 100%;
min-height: 800px;
min-width: 1024px;
}
.footer {
width: 100%;
min-height: 200px;
background-color:red;
}
.hidden{
width: 100%;
height: 500px;
background-color:blue;
}
.image {
display:block;
height: 100px;
width: 100px;
}
And this is the code:
<div class="page">
<div class="content">
<img class="image" src="img/image.png1">
<img class="image" src="img/image.png2">
<img class="image" src="img/image.png3">
<div class="hidden" style="visibility:hidden">
</div>
</div>
<div class="footer">
</div>
</div>
I need:
1) the footer to be aligned bottom when the page loads
2) after some seconds, with javascript I show the hidden div, and the footer must slide down.
I can't obtain these two things at the same time, because I can obtain 1) with
footer {
position: absolute;
bottom: 0;
}
but in this way when I show the hidden div it overlaps the footer.
Otherwise if I remove this last code, when the hidden div appears the footer slides down correctly, but when I load the page the footer is not at the bottom.
Does someone have any advice?
How about;
position: relative;
bottom: -100%;
What worked for me is the following code:
.footer {
width: 100%;
min-height: 200px;
background-color:red;
margin-top: 100vp;
}
The thing is that the footer is not seen until the user scrolls, you could
give it a less than a 100vp margin-top but it depends on the footer height which can change.
NOTE: vp means viewport height
You should try with this code:
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
I have a div that I'm trying to position by percent in order for it to stay in place (it kind of floats around not centered on an empty part of the page), while still making it accessible and look good across different screen sizes and not really off to one side.
The problem is that, while I can use left: x% to adjust it accordingly, trying to use top does not do anything unless I'm specifying pixels, not percent. If I try to alter bottom in any way, it latches the div I'm trying to position to up near my header, and altering bottom with px makes it go up the screen from the header area.
Absolutely positioning the content_wrapper actually makes the top attribute work just fine, but it pushes a bunch of space below my footer and adds a scrollbar, pretty much ruining the design beyond the footer.
Here's the HTML:
<body>
<div id="container">
<div id="content_wrapper">
<div id="header">
</div>
<div id="content">
<div class="marquee">
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
</div>
</div>
</body>
And here is the CSS:
html, body {
height: 100%;
}
#content {
height: 100%;
position: relative;
width: 100%;
float: left;
}
body {
margin: 0;
padding: 0;
color: #FFF;
/* background: image.jpg; */
background-size: cover;
}
.marquee {
position: absolute;
height: auto;
padding: 10px 5px;
background-color: #F8F8F8;
width: 30em;
left: 15%;
}
#footer_wrapper {
width: 100%;
height: 43px;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -43px 0px;
}
#content_wrapper {
width: 100%;
margin: 0px 0px -41px 0px;
padding-top: 40px;
height: 100%;
}
#footer {
position: relative;
z-index: 10;
height: 4em;
margin-top: -4.07em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
border-top: 2px solid #F8F8F8;
}
(There is a float or two in there, like in #content, not necessary to the layout, but which are attempts to fix the issue.)
Any help in this matter would be hugely appreciated. Sorry about all the code, but I feel like the footer bits are necessary simply because of the aforementioned issue with scrolling.
Take out the
height: auto !important;
in #container.
That lets you use % for top or bottom.
I've been working on a layout for some time. I decided to whip up an example in jsFiddle.
http://jsfiddle.net/PSYgU/1/
The issues I'm running into is that the ASIDE doesn't expand to the full height of it's parent "wrapper", only to the height of the view port. The ASIDE, also needs to be able to be moved to the right or left.
I'm open to other methods of creating this layout, without tables.
/* PHP option to control the width of all content by wrapper via style */
/* PHP option to control which side to float the sidebar to via style */
<div id="wrapper" style="width:100%;">
<aside style="float: right;">This Sidebar</aside>
<header>The Header</header>
<section>The Main Content Area</section>
<footer>The Footer</footer>
</div>
html, body {
min-height: 100%;
height: 100%;
}
#wrapper {
margin: 0;
padding: 0;
background: brown;
height: 100%;
}
aside {
width: 200px;
background: yellow;
height: 100%;
}
header {
height: 150px;
background: blue;
width: 100%;
}
section {
background: red;
width: 100%;
height: 100%;
}
footer {
height: 50px;
background: green;
width: 100%;
}
Because you have section also on height 100% and also lays within the wrapper it wil take the complete height of the wrapper just like sidebar.
example:
when body/html and wrapper have a height of 200px anything within the element wrapper that has height on 100% will have a height of 200px if you add a header within wrapper with height 150px you need to add this to the 200 from before.
this wil result that the height of sidebar never reach the bottom of the wrapper because its missing the height of the header.
a solution to this is to make the header and section together 100% height like header 15% and section 85%.
this will mean that both of them scale but that the sidebar will always be the same height.
<div id="wrapper">
<aside style="float: right;">This Sidebar</aside>
<header>The Header</header>
<section>The Main Content Area</section>
</div>
<footer>The Footer</footer>
html, body {
min-height: 100%;
height: 100%;
}
#wrapper {
margin: 0;
padding: 0;
background: brown;
height: 100%;
width:100%
}
aside {
width: 200px;
background: yellow;
height: 100%;
}
header {
height: 15%;
background: blue;
width: 100%;
}
section {
background: red;
width: 100%;
height: 85%;
}
footer {
height: 50px;
background: green;
width: 100%;
}