I have currently got a footer in my website that I want to have at the bottom of the page at all times. It is only one line on most screens so I thought it would be a good idea to have it always there. I want to stay away from JavaScript too.
CSS
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div class="footer">
<p class="footer">Design by <a class="footer" href="http://www.tropilac.com">Tropilac</a></p>
</div>
Use position: fixed if you need to show at all times.
html,
body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: lightgray;
color: black;
}
<html>
<body>
<div class="footer">
<p class="footer">Design by Tropilac
</p>
</div>
</body>
</html>
Try positioning your element to fixed. This is useful for elements such as a footer as if you do something like this:
.footer {
position: fixed;
height: 50px;
border: 1px solid #ccc;
position: fixed;
bottom: 0;
left: 10%;
right: 10%;
}
This will give you a footer that stays at the bottom of the viewport. One drawback is that if the content is longer than the page the footer will still show positioned at the bottom of the page. This code will also give you your 80% width.
Fiddle: http://jsfiddle.net/p16rwgnn/
Use position:fixed and bottom:0 to get what you want
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
Related
I wanted to make a fixed navbar on my website, but it overlaps other elements. As you can see from the snippet, <nav> is supposed to be the navbar, and <div> is meant to be some other content on the website. <div> element needs to be on space outside navbar like this: https://i.imgur.com/ugfdTUV.png
I already know about margin-left method, but my navbar doesn't have a specified width, so that method wouldn't work, and plus I'm looking for a more efficient way to solve this.
nav {
top: 0;
left: 0;
height: 100%;
padding: 2cm;
position: fixed;
border-right: 1px solid black;
}
nav a {
padding: 20px 0px;
display: block;
}
<nav>
Sample
Sample
Sample
Sample
</nav>
<div>
<h1>Sample text</h1>
</div>
I create an example, for support text at center i add class call page:
nav {
top: 0;
left: 0;
height: 100%;
padding: 2cm;
position: fixed;
border-right: 1px solid black;
z-index: 999;
display: block;
}
nav a {
padding: 20px 0px;
display: block;
}
.page{
position: absolute;
top: 0;
right: 0;
width: calc(100% - 200px);
background-color: #F4F7FA;
min-height: 100vh;
padding-bottom: 50px
}
<nav>
Sample
Sample
Sample
Sample
</nav>
<div class='page'>
<h1>Sample text</h1><br>
<p>Another element</p>
</div>
Although the margin fix is the simplest option, you can use the position: sticky; CSS property on the sidebar.
Have a look at this JSFidde I wrote.
I want to fix an element with position: fixed in the lower right position for the parent element.
At present, the main site is centered on the main content that contains everything, and there are margins on the left and right.
I want to display a button that jumps to pagetop in the lower right corner of the main page, not in the left and right margins.
body {
background-color: #000;
}
main {
background-color: pink;
height: 100vh;
margin: auto;
position: relative;
width: 85%;
}
a {
position: fixed;
bottom: 0;
right: 0;
}
<body>
<main>
↑
</main>
</body>
I found a related question and tried sticky, but this didn't respond when I set it to right: 0. Because this content is responsive, it was difficult to place it with px designation.
Can I position an element fixed relative to parent?
Instead of using position: fixed, replace it with position: absolute, as it is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed, and you will be able to solve the issue (please find below sample code):
body {
background-color: #000;
}
main {
background-color: pink;
height: 100vh;
margin: auto;
position: relative;
width: 85%;
}
a {
position: absolute;
bottom: 0;
right: 0;
}
<body>
<main>
<div style="position: absolute; bottom: 0; right: 0;">
<div style="position: fixed;bottom: 3%;right: 9%;">
↑
</div>
</div>
</main>
</body>
You can used sticky position if the link is a direct child of body and stands right at the end of content
section {/* for demo , to mimic content */
height: 150vh;
background:lightblue;
margin:0 3em;
}
a[href="#top"] {
/* stick it to 1em edges at bottom right */
position: sticky;
float: right; /* go to the right */
bottom: 1em;
right: 1em;
background:yellow;;
}
<header id=top>header</header>
<section>any height</section>
<footer>footer</footer>
to top
Since we know the width of the main div we can place the link with position fixed using a calculation of the right value.
NOTE - The link's position is not related to the main element but rather the viewport.
* {
margin: 0;
}
body {
background-color: #000;
}
main {
background-color: pink;
height: 200vh;
margin: auto;
position: relative;
width: 85%;
}
a {
position: fixed;
bottom: 0;
right: calc((100% - 85%) / 2);
color: red;
font-size: 2rem;
text-decoration: none;
background: white;
}
<main>
↑
</main
I've designed a new email layout for my website. it consists of three parts, header,body and footer. so 3 divs. the header background is done with an img tag cause there won't be anything on top of it. the body is a repeating thin line, and the footer as you see will have background and 4 img buttons for social networks. so it has to be background image not img but it must have a height cause as I searched A LOT! you can't control a div height by background image. but the problem is as the height is fixed, the background image will resize but the div won't, so I get background color on the extra part of the div. here's the file . any help will be appreciated. or even if you got an easier solution that would much much more appreciated. I know the coding is dirty I don't have much experience in it. keep in mind it's for an email so no hard stuff that mail clients can't handle. :D
Update : Well I decided to go with bottom padding, it almost fixes my problem Thank you.
This Is The Working Code:
<html>
<head>
<title>MissLand</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}
#Container{
text-align: center;
height: 100vh;
width: 100vh;
position: relative;
display: inline-block;
}
#Header{
background: url("./h.jpg");
min-height: 208px;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
#Body{
background: url("./b.jpg");
max-width: 600px;
min-height: 50px;
width: 100%;
float: left;
clear: both;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
z-index: 0;
}
#Footer{
background: url("./f.jpg");
min-height: 380px;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
#Header, #Footer{
background-repeat: no-repeat;
background-size: contain;
background-clip: border-box;
width: 100%;
float: left;
clear: both;
margin: 0;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header"></div>
<div id="Body"></div>
<div id="Footer"></div>
</div>
</body>
</html>
i think you need to put the footer always in bottom position, bcause there's no content again, so that's why it makes extra space in bottom,
add this style on your footer :
position: absolute;
bottom: 0;
width: 100%;
I have to make a layout with a .header and .content like with fixed height (for example 100px) and 100% width.
Then, I have to put a content with dynamical height that cover the void space.
<!-- [...] -->
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
position: absolute;
}
.header {
position: absolute;
top: 0;
height: 100px;
width: 100%;
background: #0F0;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: #0F0;
}
.content {
position: absolute;
height: 100%;
width: 100%;
background: #F00;
padding: 100px 0;
margin: -100px 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
This layout HAD to permit me to put a header and footer with fixed height, and a content with images that scale dimensions (inside a div.content).
First of all: If you have a unique element, like a page header/footer, please use an id and not a class. A class is used for elements that appear frequently or have something in common that makes it semantically correct to group them, like description texts.
Now your problem. We have to give the html and body a total height of 100% so they won't resize and we can be sure that we will use the whole page.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
You then used a wrapper, but we can omit that. <body> is already a wrapper. The header and footer explain their self.
#header {
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #0F0;
}
#footer {
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #0F0;
}
The content is a bit tricky. It needs to be expanded to 100% - 100px at the top - 100px at the bottom. Impossible? No.
#content {
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
overflow: hidden; /* No scrollbars | Make this 'auto' if you want them */
background: #F00;
}
Finished. You can have a look at it on jsFiddle.
I am developing a web app that is supposed to have the feeling of a desktop app. I want my layout to make use of the entire browser window height (no more, no less). I've made an image that show the intended structure of the page.
Intended layout
In other words, I don't want the user to be able to scroll the entire page, but rather the different sections of the page. Similar to how most desktop applications work.
I've read everything about how to create columns with equal height etc., but non of the solutions I've found adds scrolling to the different sections instead of the entire page, and still makes use of the entire window height.
I hope someone has a solution to this, it would be awesome. I've been googling for hours.
If you are familiar with jQuery, please see http://layout.jquery-dev.net/demos.cfm .
They are also more plug ins like this out there.
This should get you 90% of the way there:
http://jsfiddle.net/aEdc7/
However, have you considered using a JavaScript framework such as Ext JS? Take a look at some of the demos: http://dev.sencha.com/deploy/ext-4.0.1/examples/
html, body {
margin: 0;
padding: 0
}
#container > div {
position: absolute
}
#header {
top: 0;
width: 100%;
background: cyan;
height: 40px
}
#nav {
top: 40px;
bottom: 0;
left: 0;
width: 150px;
background: #ccc;
overflow-y: auto
}
#content {
top: 60px;
bottom: 0;
left: 150px;
right: 0;
background: #eee;
overflow-y: auto
}
#error {
top: 40px;
left: 150px;
right: 0;
height: 20px;
background: #444
}
<div id="container">
<div id="header"></div>
<div id="nav"><br /></div>
<div id="error"></div>
<div id="content"></div>
</div>
There's a CSS trick that can be usefull in your case :
declare an element's position as absolute
set the top position at 0
set the bottom position at 0
The height of the element should not be defined, or defined to auto.
Than the element is full height of its parent.
this can probably help to build the layout you're looking for.
example code :
<html>
<head>
<style type="text/css">
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.header {
height: 40px;
background: #aabbff;
}
.contentLeft {
position: absolute;
top: 40px;
bottom: 20px;
left: 0;
width: 40%;
overflow: auto;
background: #eeeeff;
}
.contentRight {
position: absolute;
top: 40px;
bottom: 20px;
right: 0;
width: 60%;
overflow: auto;
background: #ddddff;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border: 3px solid blue;
height: 14px;
background: #9999ff;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="contentLeft"></div>
<div class="contentRight"></div>
<div class="bottom"></div>
</div>
</body>
</html>
Ciao,
Nico