I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer
Related
I use display: table to center the image, but It seems not work? why?
Any answer I will be appriciatelly. Thank you very much ！I can not find my mistake, could you help me?
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: table;
margin-bottom: 60px;
text-align: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</body>
</html>
To vertically center this 100px image in this 300px div, you can add a 100px top margin to the image (because 300-100 = 200; 200/2 = 100), and set its horizontal margin to auto. No need for display: table etc.
.wrapper4 img {
width: 100px;
height: 100px;
margin: 100px auto;
}
However, that is not very reusable. Will your images always be 100px? Will they always be square?
If not, you have to account for centering landscape & portrait images of different sizes.
The easiest way to do this, with modern web browsers (anything newer than IE9 from about 2013) is to use Flexbox, as explained in this answer by tombul.
You could apply the flex rules directly to your div element, but again this is not very reusable. Another option is to create a CSS class for an element that centers its contents in a flex container. This CSS class is then applied in the HTML. The wrapper class now just handles the dimensions and appearance of the wrapper; the wrapper img class just handles the dimensions and appearance of the image. The alignment of the image is controlled by the centerFlex class. If you wanted multiple images with left, centered, or right-justification, you could create & apply similar rules to accomplish that.
FYI, you can include all margins with the shorthand syntax margin: top right bottom left, or in pairs margin: top&bottom left&right
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin: 0px auto;
}
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper4 centerFlex">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</body>
</html>
Try this :
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: flex;
margin-bottom: 60px;
align-items: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</body>
</html>
The table-cell alignment rules need to be declared on the containing element of the nested element you need to align.
div class="wrapper4"> <!-- containing element (should be table-cell) --->
<!-- element to align -->
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
Code Snippet Demonstration:
An additional containing element has been inserted to wrap the nested img tag - we'll use this contiaining element to declare the table-cell rules to
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: table;
margin-bottom: 60px;
}
.wrapper4 .wrapper-cell {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.wrapper4 img {
width: 100px;
height: 100px;
}
<div class="wrapper4">
<div class="wrapper-cell">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</div>
Alternatives
Flex-Box
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: flex; /* Adjusted */
margin-bottom: 60px;
/* Additional */
justify-content: center;
align-items: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
}
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
Absolute Positioning
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: block; /* Adjusted */
margin-bottom: 60px;
/* Additional */
position: relative;
}
.wrapper4 img {
width: 100px;
height: 100px;
/* Additional */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
Relative Positioning
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: block; /* Adjusted */
margin-bottom: 60px;
}
.wrapper4 img {
width: 100px;
height: 100px;
/* Additional */
display: block;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
CodePen Demonstrations
Horizontal Alignment (Arbitrary Elements)
Vertical Alignment (Arbitrary Elements)
I'm currently creating a single page video playing for store advertisement.
My problem is how can i set the video tag to full height relative to its parent div? I used vh dimension but still no luck to solve that.
As you can see on the image the video portion has gaps on both its top and bottom. already set the padding and margin to 0.
Code:
<!DOCTYPE html>
<!-- http://www.101computing.net/html-website-layout/ -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
BODY {
background-color: #FFF;
overflow: hidden;
width: 100%;
margin: 0px;
}
.page {
display: block;
width: 100%;
min-height: 800px;
overflow: auto;
margin: 0px auto 0px auto;
box-sizing: border-box;
}
.pageClockPanel {
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
clear: none;
width: 60%;
height: 10%;
padding: 10px;
}
.pageRightPanel {
background-color: #1A237E;
position: fixed;
top: 0px;
right: 0px;
clear: none;
width: 40%;
height: 87%;
box-sizing: border-box;
padding: 10px;
}
.pageLeftPanel {
background-color: #E64A19;
position: fixed;
top: 10%;
left: 0px;
clear: none;
width: 60%;
height: 77%;
box-sizing: border-box;
padding: 0px;
}
.pageBottomPanel {
background-color: #333;
position: fixed;
bottom: 0px;
right: 0px;
clear: none;
height: 13%;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.item img {
width: 100%;
min-height: 77vh
}
.item video,
source {
width: 100%;
min-height: 77vh;
}
</style>
<title>Page Title</title>
<!-- https://www.bootply.com/59900 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
<div class="pageClockPanel">
</div>
<div class="pageRightPanel">
</div>
<div class="pageLeftPanel">
<div class="row">
<div class="col-md-12">
<div class="item">
<video video autobuffer autoplay>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
</video>
</div>
</div>
</div>
</div>
<div class="pageBottomPanel">
</div>
</div>
</body>
</html>
I solved my problem by adding this css
.item{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.item video {
min-width: 100%;
min-height: 100%;
height:auto;
}
css explanation here
The video tag get always the same ratios (width/height) as the video file.
It would looks like stretched if you want to fit the width and the height - if this is just possible.You can try to set the height attribute of the video tag
I've been trying various techniques to implement Ryan Fait's Sticky Footer technique and none seem to work. My footer content always overlaps my main content when the browser is vertically challenged. It could be because I have many fixed positioned DIVs nested within the footer. When I wrap these DIVs around a parent DIV (#footer), this parent DIV doesn't seem to even appear, nor can I apply styles to it to control its position (and the content within).
HTML:
<body>
<div class="wrapper">
<div id="content"> Juicy stuff goes here</div>
<div class="push"></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div><!-- Footer Area -->
</body>
CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -240px;
}
.footer, .push {
height: 240px;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: fixed;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: fixed;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: fixed;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: fixed;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
Thanks!
This is a better way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer"></div>
</body>
</html>
The limitation of sticky footers is that the footer must stay at a fixed height. But the elements you have in there shouldn't affect the layout as long as you are careful.
EDIT: Here's a revised template with the footer elements included:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924; position: relative;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: absolute;;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: absolute;;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: absolute;;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: absolute;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div>
</body>
</html>
I am trying to get this layout somewhat fluid. I want #logo to be in the lower right of #infobot its size determined by the picture which I want to scale with browser window. #white should just cover up the are to the left of #logo. How do I get #white and #logo to line up next to each other and still keep the fluid sizes?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords"content=""/>
<title></title>
<link href="css/testmain.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Volkhov' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="nav">
<p>+</p>
</div>
</header>
<div id="container">
<div id="infowrap">
<div style="background-color: white" id="infotop"></div>
<div style="background-color: yellow" class="infobox"></div>
<div style="background-color: blue" class="infobox"></div>
<div style="background-color: green" class="infobox"></div>
<div style="background-color: red" class="infobox"></div>
<div id="infobot">
<div id="white"></div>
<div id="logo"><img style="height: 100%" src="img/logo3.png"></div>
</div>
</div>
</div>
<script>
$('#video, #nav').on('click', function(){
$('#nav').toggleClass('rotate');
});
</script>
<script>
$(document).ready(function(){
$("#video, #nav").click(function(){
$("#infowrap").fadeToggle(250);
});
});
</script>
<video id="video" src="vid/147000037.mp4" autoplay loop>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: purple;
}
header {
position: relative;
display: block;
height: auto;
width: 100%;
z-index: 999;
min-width: 520px;
}
#nav {
-webkit-transition: all 0.5s;
position: absolute;
float: right;
display: block;
top: 5px;
right: 15px;
color: #000000;
}
#nav a {
font-family: "HelveticaNeue-UltraLight","HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
font-size: 2.5em;
color: #000000;
}
.rotate {
-webkit-transform: rotate(45deg);
-webkit-backface-visibility: hidden;
}
#video {
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
}
#container {
position: absolute;
width: 100%;
height: 100%;
min-width: 520px;
min-height: 620px;
}
#infowrap {
z-index: 900;
display: none;
position: absolute;
top:10px;left:10px;right:10px;bottom:10px;
background-color: ;
min-width: 500px;
}
#infotop {
width: 100%;
height: 6%;
min-width: 500px;
float: left;
clear: both;
display: block;
}
.infobox {
width: 50%;
height: 44%;
min-width: 250px;
min-height: 250px;
float: left;
display: block;
}
#infobot {
width: 100%;
height: 6%;
min-width: 500px;
float: left;
clear: both;
display: block;
}
#white {
height: 100%;
width:;
float: left;
display: block;
background-color: white;
}
#logo {
float: left;
display: block;
}
DEMO
CSS:
#infobot {
width: 100%;
height: 6%;
min-width: 500px;
float: left;
clear: both;
display: block;
background:#cf5; /* some bg color? */
}
#white {
height: 100%;
width:50%; /* !!! */
float: left;
display: block;
background-color: #fff;
}
And btw use this:
$(function(){
$("#video, #nav").click(function(){
$("#infowrap").fadeToggle(250);
$('#nav').toggleClass('rotate');
});
});
How to do to avoid having the scroller with a sticky footer to the bottom of the page (not bottom of window)?
When I remove height=100% from content and sidebar, I'm no more getting the scroller. However, when doing so, my content and sidebar do not fill all the space down to the footer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 13</title>
<style media="all" type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #wrap, form {
height: 100%;
}
#wrap, #footer {
width: 750px;
margin: 0 auto;
}
#wrap {
background: #cff;
}
html, body {
color: #000;
background: #a7a09a;
}
body > #wrap {
height: 100%;
min-height: 100%;
}
form {
/*height: auto;*/
min-height: 100%;
}
#main {
background: #000;
height:100%;
min-height:100%;
height: auto !important; */
}
#content {
height:100%;
float: left;
padding: 10px;
float: left;
width: 570px;
background: #9c9;
}
#sidebar {
height:100%;
float: left;
width: 140px;
background: #c99;
padding: 10px;
}
#footer {
position: relative;
margin-top: -100px;
height: 100px;
clear: both;
background: #cc9;
bottom: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
#header {
/*padding: 5px 10px;*/
background: #ddd;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
<h2>sidebar</h2>
</div>
<div id="content">
<h2>main content</h2>
</div>
</div>
</div>
<div id="footer">
<h2>footer</h2>
</div>
</form>
</body>
</html>
Here is finally one solution (I don't remember where I get this code .... it's not mine ;-) ) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>CSS Layout - 100% height</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */;
background: gray;
font-family: arial,sans-serif;
font-size: small;
color: #666;
}
div#container {
position: relative; /* needed for footer positioning*/;
margin: 0 auto;
/* center, not in IE5 */ width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */;
height: 100%; /* IE6: treaded as min-height*/;
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
/*background: #ddd url("../csslayout.gif") 98% 10px no-repeat;*/
border-bottom: 6px double gray;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */;
background: #ddd;
border-top: 6px double gray;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
entete </div>
<div id="content">
contenu </div>
<div id="footer">
pied de page
</div>
</div>
</body>
</html>
I've done this using a container div with a 100% min-height. Then, I have the page content and footer div's in the container. Here's my HTML:
<div id="MainContainer">
<div id="FullPage">
</div>
<div id="Footer">
</div>
</div>
And here's my corresponding CSS:
html, body, #MainContainer
{
min-height: 100%; /*Sets the min height to the height of the viewport.*/
height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/
margin: 0;
padding: 0;
}
html > body #MainContainer
{
height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/
}
#MainContainer
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#FullPage
{
height: auto;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0 0 25px 0;
overflow: hidden;
}
#Footer
{
clear: both;
left: 0;
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
}