I am trying to have my footer at the bottom of the page - not fixed. The HTML layout is as follows:
<header><!-- content --></header>
<main>
<div class="margin-center">
<div class="individual">
<section class="hours">
</section>
</div>
<div class="stacked">
<section class="blog">
</section>
<section class="pets-seen">
</section>
</div>
</div>
</main>
<footer>
<!-- footer content -->
</footer>
The following is my CSS:
footer {
/* color */
background-color: #334051;
color: #fff;
/* position and size */
position: absolute;
left: 0;
width: 100%;
}
main {
width: 100%;
height 500px;
margin-top: 250px;
position: relative;
}
All aspects of the page are working and display fine except for the footer which displays over the rest of the content.
Well that is what happens, when you use position: absolute. You can read up more here. Simply remove it and the standard (static) should work.
footer {
/* color */
background-color: #334051;
color: #fff;
/* position and size */
width: 100%;
}
main {
width: 100%;
height 500px;
margin-top: 250px;
position: relative;
}
<header><!-- content --></header>
<main>
<div class="margin-center">
<div class="individual">
<section class="hours">
</section>
</div>
<div class="stacked">
<section class="blog">
</section>
<section class="pets-seen">
</section>
</div>
</div>
<img src="https://www.placecage.com/1000/1000">
</main>
<footer>
<!-- footer content -->
This is the footer
</footer>
Related
I have a custom design for a website that consists of an image as the background, and a box that has the content. The website design
So my problem is that I have a page that has a set of accordion buttons that expand the content larger than the container. I want the container to stay the same size and have the content overflow it.
The relevant code is as follows:
CSS
.background {
background-image: url(/recources/images/page-background.png);
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
width: 100%;
padding: 98px;
}
.web-content {
display: table;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.web-content_row {
display: table-row;
height: 100%;
}
.web-content_row .web-content_height {
overflow-y: auto;
max-height: 100%;
height: auto;
}
HTML
<body class="background">
<section class="web-content">
<div class="web-content_row web-content_height">
<header>
<!-- Header content -->
</header>
<section class="web-content_tutorials-menu">
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
</section>
</div>
<footer>
<!-- Footer content -->
</footer>
</section>
</body>
Whenever an accordion button is clicked, the content pushes the footer and the container box off the page, and this has several issues for me. First I don't want the container to expand with the content, I want the content to overflow the container and the container to stay the same size. Second, once the content is larger the view height the scroll-bar doesn't show up.
Now I did try really hard to figure this out on my own before asking this question. And I also have a few theories on what is wrong. I think the page won't scroll is because of the display: table; and display: table-row; properties in the CSS code.
So if any of you guys have an answer that can fix the content expanding both the footer and the container would be awesome.
Sorry if this explanation was too "in depth". This website has a very custom design that has a lot of differences than most normal websites.
Sincerely,
Hexsphere
Here's how I'd do it keeping your HTML structure :
body {
background: tomato; /* Simulates the photo background */
}
.web-content {
background: #fff;
width: 80vw;
height: 70vh;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: auto;
}
footer {
position: fixed;
height: 10vh; /* change accordingly to your wishes */
width: 80vw;
background: aqua; /* oh yeah I like wicked colors */
left: 10vw; /* (100 - 80) / 2 */
bottom: 15vh; /* (100 - 70) / 2 */
}
<body class="background">
<section class="web-content">
<div class="web-content_row web-content_height">
<header>
<!-- Header content -->
</header>
<section class="web-content_tutorials-menu">
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
foo<br>bar<br>foo<br>bar<br>
</div>
</section>
</div>
</section>
<footer>
<!-- Footer content -->
Fixed footer heehaa
</footer>
</body>
I hope this helps!
I do not know how is that space coming. I do not want fixed footer but only want fixed navbar. My navbar is working fine but footer is having some white space below it.
body {
padding-top: 4.5rem;
min-height:100%;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
left: 0;
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #000000;
}
This is the CSS for footer. I am using Bootstrap 4.
<body>
<div class="container-fluid">
<nav ..... #code for navbar
</nav>
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
~~~~MY CONTENT~~~
</div>
</div>
</div>
<div class="row">
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer></div>
</div>
</div>
However, when I change the CSS to position:fixed. It works fine but I do not want that. Thank you in advance.
Your content element's height is not the screen's height. Therefore your footer will be like that, you can do it with JavaScript or just put content in your container.
I want to make a background image transparent and found a good answer here. But my footer is collapsing to the top of my page underneath my header. I can see the transparent image in the body, but my main article continues below the footer with the html background color applied. What is causing the footer to collapse? The section which is the parent container for the div's has a defined width. Any help would be appreciated.
html {background: #95A3C2;}
body {
background: white;
background-image: url(_images/pg_p_lewis_bckgrnd.jpg);
width: 960px;
margin: 0 auto 0;
font-family: "minion-pro";
}
section {
width: 960px;
display: block;
position: relative;
}
#trns {
height: auto;
opacity: 0.2; filter: alpha(opacity=20);
position: absolute;
}
#trnsb {
height: auto;
}
#heading {
width: 960px;
}
<body>
<header>
<div id="colA">
</div>
</header>
<section>
<div id="trns">
<div id="trnsb">
<div id="heading">
<div id="colD">empty</div>
</div>
<div id="main">
<div class="text">
<p>text</p>
<p>text</p>
</div>
<div class="image">
<p>Image Gallery</p>
<p><span class="caption">Center image vertically on page and hover to enlarge.</span></p>
<p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div id=copyright>copyright 2016 by Barton Lewis</div>
<div id=hosting>hosting by simply hosting</div>
</footer>
</body>
</html>
You have given #trns a position of absolute. Doing this removes the element from the normal flow of the document. So there is nothing 'pushing' the footer down. From your code I couldn't see a reason for giving #trns an abolute position. You should be able to just remove this declaration from your css.
Using the template idea from here:
https://gist.github.com/seyDoggy/e919a429b2459aedf509
<div class="container">
...
</div>
<footer class="footer">
<div class="container">
...
</div>
</footer>
This works great, except when divs being to stack (responsively). Then, the footer is no longer visible. Does anyone know of a simple fix for this?
Change sticky footer css to this
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
HTML:
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
code above is based from bootstrap
I have got the header and main page content color to stretch the full page but still have the content centered.
However my footer isn't stretched, how do I stretch the footer like the header?
HTML:
<body>
<div id="header">
<div class="container"> <img src= "images/webalign-uk-white.png" width="429" height="61" />
<!-- header's content here --><p class="fltrt">Contact: 00000000000</p></div>
<!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- main content here --><h1> Hello!</h1>
<div id="footer">
<div class="container">
<!-- footer's content here --><p>Footer1</p>
</div><!-- .container -->
</div><!-- #footer -->
</body>
CSS:
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
padding: 0 15px; /* the auto value on the sides, coupled with the width, centers the layout */
}
#header {
background-color: #eee;
}
#content {
padding: 10px 0;
background-color:#F9f9f9;
}
#footer {
padding: 10px 0;
background-color: #333;
color: #bbb;
clear: both;
}
You didn't close the .container and #content divs. This might be the issue.