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;
}
Related
When adding a footer to my page, styling is not attached to the page, even though the path's are correct. The footer never goes to the bottom, just stays underneath my content.
I've tried moving the block of code inside/outside the main container div, I've even tried downloading the template and adding my code to that, and that doesn't work either. Stock code from the Bootstrap site works. As soon as I paste it into my code it no longer is at the bottom where it should be.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
No errors besides not docked to the bottom of the page, it's like my CSS file isn't linked, I checked the paths and they are correct.
Footer is inside the body tag. The body have a margin-bottom: 60px;. So footer not docked to bottom like it should be.
Change css body margin-bottom: 60px; to margin: 0px;. Here is the complete code.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
The code you posted works fine for me in two different browsers. I suspect you have other code on the page screwing things up. Below is a complete example.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
<p>And the lamb lies down on Broadway.</p>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
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'm trying to create something like this:
http://jsfiddle.net/S6FUQ/
HTML is:
<div id="container">
<header></header>
<main>
<section class="half"></section>
<section class="half"></section>
</main>
</div>
And CSS is:
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
}
header {
height: 50px;
background: gray;
}
main {
height: 100%;
background: green;
}
.half {
height: 50%;
}
.half:first-child {
background: blue;
}
.half:last-child {
background: yellow;
}
In it, I have a thin ribbon at the top, and I want to divide the rest of the screen into two equal sections, but I don't want vertical scrollbar to appear.
I tried margin-bottom: 50px; for main, but it didn't work. What should I do?
Height of "main" should be 100% - 50px. Here is the fiddle.
main{height: calc(100% - 50px);}
To make it work on old browsers, you could use absolute positioning.
Demo
#container {
position: relative;
}
main {
position: absolute;
width: 100%;
top: 50px;
bottom: 0;
background: green;
}
You are already using % to set height... Why don't you use it again to solve your problem?
header {
height: 10%;
background: gray;
max-height:50px; //this will ensure your header will never go bigger than 50px
}
main {
height: 90%;
background: green;
}
PS: The only time your header is going to be smaller than 50px is when the browser is smaller than 500px (which will be only in some landscape mobile devices)
EXAMPLE
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.
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.