Over the years I've tried lot of different techniques, but I still can't find a way, where I could create a footer, that is dynamically changes height, depending on the content and if the site have less content, the footer goes down to the bottom of the page.
I've tried to play with the ::after pseudo element:
footer::after {
content: '';
position: absolute;
background: red; //just test
width: 100%;
height: 99px;
}
And I found a way, where you can do this to look nice, but you need to set the height of the footer. But if you want a real responsive UI, you can not set the height of the footer :)
I hope anyone knows the secret, how to create a dynamic footer.
What you want is sticky footer with fluid height.
In older browsers you'll need some JavaScript.
In modern browser you can use css table display types:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
</body>
</html>
I took this example from:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
EDIT: Now I see you want to expand the footer, not the content. I'm leaving the original for bypassers with sticky footer question as it is more common version.
Try this version instead:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<!-- these two line differ from the previous example -->
<section class="Row"><h2>Awesome content</h2></section>
<footer class="Row Expand"><h3>Sticky footer</h3></footer>
</body>
</html>
This can easily be done with CSS2.1 (but not in IE7-). The main trick is the following:
.container {
display: table;
height: 100%;
width: 100% /* mimics `display: block` */
}
.footer {
display: table-footer-group;
}
/* to add padding use the below or wrapper/inner wrapping element combo. */
.footer:before, .footer:after {
padding: 1em;
content: '';
}
In modern browsers, it can also be done with FlexBox, which is probably more appropriate theoretically, but less supported yet.
It is sticky footer, please try this:
HTML
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>
CSS
/*sticky footer style*/
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*for ie6*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/* equal to the footer's height*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*The footer' height*/
background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}
Pleas view the demo. Other methods, you can click here.
And you can use the CSS3 flexbox Module, Like this:
HTML
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
CSS
header,section,footer {
display: block;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
body {
width: 100%;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section {
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
-webkit-flex:1;
flex:1;
background: hsla(250,20%,30%,0.9);
}
header {
background: orange;
}
footer {
background: green;
}
Please view the demo. About the css3 flexbox module.
Related
The code that appears below creates the following layout:
The important part is that the content, although centered on the screen when not overflowing, never overlaps the navbar and has its own scrollbar:
The problem is that this layout is achieved with the help of padding (marked by a comment in the code below), which results in the additional scrollbar on the right of the screen.
How can I design the same layout that would have only one scrollbar - the one in the content?
Please note that the solution should not break the following details:
The rounded corners and the shadow.
The title in the content block not participating in scrolling.
The image covering the whole scrollable content, so it scrolls together with the content.
In addition, it would be great if this can be achieved without as many nested div's as I have right now.
Edit: I am ready to go with the suggestion of #JHeth in the comments section. However, I would still be interested if someone can come up with an alternative design that does not rely on padding for centering.
Here is the code (CodePen):
* {
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
:root {
--navbar-height: 3rem;
}
.navbar {
width: 100%;
text-align: center;
font-size: 2rem;
line-height: var(--navbar-height);
background-color: lightgreen;
}
.centering {
position: absolute;
inset: var(--navbar-height) 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
& .auto-margin {
margin: auto;
// For scrollable content
display: flex;
max-height: 100%;
padding-bottom: calc(var(--navbar-height)); // Causes scrolling
}
}
.content-block {
display: flex;
flex-direction: column;
.title {
font-size: 2rem;
position: sticky;
}
.content-outer-container {
display: flex;
flex-direction: column;
overflow-y: auto;
border-radius: 1em;
box-shadow: 0 1em 2em rgba(black, 0.4);
.content-container {
width: 300px;
overflow-y: auto;
.content {
position: relative;
padding: 1em;
&:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-position: center;
background-image:
url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
}
}
}
}
}
<div class="navbar">An Amazing Navbar</div>
<div class="centering">
<div class="auto-margin">
<div class="content-block">
<div class="title">My Title</div>
<div class="content-outer-container">
<div class="content-container">
<div class="content">
<h1>Line1</h1>
<h1>Line2</h1>
<h1>Line3</h1>
<h1>Line4</h1>
<h1>Line5</h1>
</div>
</div>
</div>
</div>
</div>
</div>
simply remove max-height:100%; to .centering .auto-margin and it'll works!
.centering .auto-margin {
margin: auto;
display: flex;
/* max-height: 100%; */
padding-bottom: calc(var(--navbar-height));
}
I have a trouble about flex item in css.
Please see the folloing code in jsfiddle.
https://jsfiddle.net/mitsuru793/n0y6g5qu/32
html
<html>
<head>
</head>
<body>
<div class="main">
<div class="main-flex-container">
<div class="text">text</div>
<div class="image-flex-container">
<div class="label">label</div>
<img src="https://dummyimage.com/200x400/ff0000/ffffff">
</div>
</div>
</div>
</body>
</html>
scss
.main {
width: 80%;
height: 100px;
color: white;
}
.main-flex-container {
display: flex;
height: 100%;
background-color: green;
.text {
width: 100%;
background-color: orange;
}
}
.image-flex-container {
display: flex;
.label {
background-color: #0000aa;
}
img {
height: 100%;
}
}
This code renders different on each browsers.
My os is macOs Mojave 10.14.6.
rendering image
The redering result by opera is that I was expected.
Why does other browsers render wrong? Is this bug?
Red area is a img tag and image. This must be shrunken by orange are which has 100% width.
However, in not opera, the width of red area(image) is original image width.
I want the width to be shrunken.
.main {
width: 80%;
height: 100px;
color: white;
}
.main-flex-container {
display: flex;
height: 100%;
background-color: green;
.text {
width: 90%;
flex-grow: 1;
background-color: orange;
}
}
.image-flex-container {
display: flex;
justify-content: flex-end;
width: 10%;
.label {
background-color: #0000aa;
}
img {
height: 100%;
}
}
I need the .content div use all the available space
body {
height: 100%;
}
.nav {
padding: 20px;
}
.content {
height: 100%;
}
<body>
<div class="nav">nav</div>
<div class="content">content</div>
</body>
Since I don't know the height of the .nav I can't use height: calc(100%-Xpx)
is there any other way to make .content use the remaining height of the page?
Thanks
Use min-height: 100vh on body, then set the parent (body in this case) to display: flex; flex-direction: column and use flex-grow: 1 on .content for it to use the available space.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
.nav {
padding: 20px;
}
.content {
flex-grow: 1;
background: #eee;
}
<div class="nav">nav</div>
<div class="content">content</div>
Basicly I have a webpage where users can change content inside my layout. I'm trying to force the div where the content is being put to overflow hidden or scroll.
But the width of my page keeps increasing rather then scrolling/hiding.
http://jsfiddle.net/weLn0g96/3/
Anyone more clever than me that can figure this out? Prolly missing something like position:absolute; or overflow should be somewhere else etc.
Update #container to be display:block; and overflow: scroll;. Using display:table; will make the #container element width as wide as it needs to be to hold the data and will not adhere to the 100% width of the parent element that you have declared and are trying to accomplish.
#container {
/* Change display: table; to */ display: block;
width: 100%;
height: 100%;
text-align:center;
overflow: scroll; /* add this */
}
You should also add height:100%; to your html and body elements if you want the #container element to truly be 100% of the height of the body.
See Snippet with border added to #container for demonstration purposes.
html,
body {
margin: 0;
padding: 0;
background-color: #111111;
}
#container {
/* Change display: table; to */
display: block;
width: 100%;
height: 100%;
text-align: center;
overflow: scroll;
/* add this */
}
#container {
/* styles just for demonstration */
border: 5px solid green;
box-sizing: border-box;
}
#row-empty {
display: table-row;
width: 100%;
height: 100%;
}
#sides {
display: table-cell;
}
#main {
display: table-cell;
width: 800px;
margin: 0px;
padding: 0px;
}
#main-table {
display: table;
width: 100%;
height: 100%;
background-color: #CCCCCC;
}
#menu {
display: table-row;
}
#menu-col {
display: table-cell;
width: 100%;
height: 100px;
border-bottom: 1px solid #000000;
}
#page {
display: table-row;
width: 100%;
height: 100%;
}
#page-col {
display: table-cell;
position: relative;
background-color: yellow;
overflow-x: hidden;
}
<div id="container">
<div id="row-empty">
<div id="sides"> </div>
<!-- Left Column -->
<div id="main">
<!-- Middle Column -->
<div id="main-table">
<!-- New table inside table-cell for rows inside this cell -->
<div id="menu">
<!-- Top Row -->
<div id="menu-col">
menu
</div>
</div>
<div id="page">
<div id="page-col">
<!-- Middle Row -->
testar [asdf] asdasd
<div news style="display:inline-block;width:500px;overflow-x:auto;background-color:red;width:1500px;">Inga nyheter än.</div> xx
</div>
</div>
</div>
</div>
<!-- Middle Column (main) end -->
<div id="sides"> </div>
<!-- Right Column -->
</div>
<!-- row end -->
</div>
<!-- container end -->
I am trying to place two img tags onto of each other but have them both centered.
Here is where im trying to do it: http://nathanturnbull.me/scrolldiv/home.html
The Html:
<div id="divs" class="div1">
<div class="textcont">
<img class="imglogo" src="gpk.gif" alt="GPK NET">
<div class="textcont" >
<img class="imgbutton" src="gpk.gif">
</div>
</div>
</div>
The css:
#divs, #div4 {
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
font-family: 'Cousine';
font-size: 80px;
color: #ffffff;
text-align: center;
}
.div1 {
display: table;
}
.textcont {
display: table-cell;
vertical-align: middle;
background-color: transparent;
}
.imgbutton {
height: 42px;
width: 84px;
}
.container {
text-align: center;
}
.container IMG {
display: inline; /* browser default */
}
or
IMG {
display: block;
margin: 0 auto;
}
Your images should be horizontally centred inside their container.
Remove the display:table-cell; statement from your .textcont CSS class.
See example.