I'm trying to fill the rest of my content, before my footer. I've found many pages here with solutions that seem logical but don't seem to work within my page. I cant change my position status of my footer to fixed or absolute.
I currently have a div with the id of "bottomfix". I tried the fixed & zerod solution but that didn't work either.
I invite you view my biopage, the css that I'm working on is the last sheet titled style.css.
A way to do this, which I think would work for your layout, is using flexbox. I actually did this for one of my own projects (example). This is the best solution, since your footer and other content can have dynamic height.
General HTML structure:
<body>
<main>
Header and page content go here...
</main>
<footer>
Footer...
</footer>
</body>
It's important to include many different prefixes and fallbacks to make it work in all browsers (I tested it in multiple versions of Chrome, FF, IE and Safari).
CSS:
body {
display: box;
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
min-height: 100vh;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
main {
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
footer {
margin-top: 32px; // Whatever space you want between content and footer.
-webkit-box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
If you want to control the size of your .bottomfix div, you can add more flexboxes into the main element.
Add to your #footer class position: fixed;
then add position bottom: 0px; and it will be at the bottom
#footer {
border-width: 5px;
bottom: 0;
padding: 6px 0 7px;
position: fixed;
width: 100%;
}
if you want footer to bi fixed to the bottom of the page only if your page doesn't have enough content to fill in page then add this script before <body> closing tag
<script type="text/javascript">
if(jQuery('header:first').height()+
jQuery('main:first').height()+ jQuery('footer:first').height() > jQuery(window).height()){
$('#footer').css({position: 'fixed', bottom: '0px'});
}
</script>
and this scrip will on load check if your page needs fixed footer :)
or you can add it in
$(document).ready(function(){
//code
});
#footer {
border-top: 1px solid #000;
background: #222;
color: #7B7B7B;
font-size: 13px;
position: absolute;
z-index: 100;
clear: both;
padding: 10px 0;
bottom: 0;
}
This worked for me I set the position to absolute and set bottom:0; to force the div to the bottom of the browser
You can try using the the CSS3 calc function. Like this:
main{
min-height: 100%; /*fallback if browser doesn't support calc*/
min-height: ~"calc(100% - 330px)"; /*330px comes from 270px <header> plus 60px <footer>*/
}
You would just have to replace the <header> and <footer> height value calculation to yours.
Also make sure you have something like this:
html, body{
height:100%;
}
Just try this. 66px is footer + header height
html, body, #page, #bottomfix, main > div {
height: 100%;
}
main {
height: calc(100% - 66px);
}
Related
So I am learning a bit more about using CSS flex instead of using static positioning of content. However, I have defined my link styles as well as bold styles. My guess is that it's adapting to the container that is in (which is using flex feature) and that is why it is stretching across the size of the container it is inside. My question now is, how do I fix this? I've seen that I can do "display:inline-block" on the link, but that has not fixed it.
Here is my code:
.container{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 80%;
margin: auto;
background-color:#fff;
overflow: hidden;
font-size: 15px;
line-height: 20px;
padding:1em;
}
.container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
a{
text-decoration:none;
border-bottom-style:double;
border-bottom-width:2px;
color:#99d3df;
display:inline-block;
padding:0px;
overflow: hidden;
}
i{
display:inline-block;
color:#88bbd6;
text-decoration:italic;
}
And what I have:
This is a Google Link<BR>
Google is <i>extremely helpful</i>!
This is what it looks like for reference.
Problem image
It seems you missed the .container wrapper div in the markup you provided.
Let's look at this code:
<!-- HTML -->
<div class="container">
<span>This is a </span><a href="http://google.com">Google Link</a
</div>
<div class="container">
<span>Google is </span><i>extremely helpful</i>!
</div>
<!-- /HTML -->
/* CSS */
.container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
Property flex with value of 1 100% means we tell the browser to style any elements (the asterisk *) nested in .container to have 100% width of their parent's width.
I would suggest you to just remove that part to fix the problem.
Here's my approach to your markup.
.container {
display: flex;
width: 80%; /* flexible value */
flex-direction: row; /* this is to make sure that we'll have side-to-side layout within .container */
}
a {
text-decoration: none;
border-bottom-style: double;
border-bottom-width: 2px;
color: #99d3df;
display: inline-block;
padding: 0px;
}
a, i{
margin-left: 5px; /* this is to give a 10px spacing */
}
<div class="container"><span>This is a </span>random link<span></span></div>
<div class="container"><span>Google </span><i>is extremely helpful! </i></div>
It is working fine when I tried your code in js fiddle
see in this image
May be some other css is affecting your links to stretch it out.
https://jsfiddle.net/wqmm0kxb/5/
html:
<div class="full">
<header><h1>header stuff</h1></header>
<section>
<div>
{lots and lots of content}
</div>
<div>b</div>
<div>c</div>
</section>
</div>
css:
.full {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
header {
flex: 78px 0 0;
background: #ececec;
color: black;
padding-left: 33px;
}
section {
flex: auto 1 1;
display: flex;
align-items: stretch;
> div {
flex: auto 1 1;
overflow-y: auto;
}
}
}
My outer container, '.full', takes up the full width and height of the screen, and uses display:flex to make sure that the header + section children stretch to take up all the space beneath them.
Now, what I want is naturally for the header to take up 78px and the section to take up {full height - 78px} -- but without doing anything like calc preferrably. And I want to be able to scroll in the div children of section, without scrolling affecting the other divs or the page as a whole.
This works perfectly in Chrome, but open up my fiddle in firefox, edge, ie and it doesn't work as expected. Section gets the height of {lots and lots of content} rather than only taking the remaining space of '.full'
What should I do to achieve the Chrome-like layout that I'm expecting?
Apply the overflow-y:auto for your section also, that will fix the issue in IE and Firefox.
section {
flex: auto 1 1;
display: flex;
align-items: stretch;
overflow-y: auto;
> div {
flex: auto 1 1;
overflow-y: auto;
}
}
Fiddle DEMO
I have an extremely simple flexbox based layout with a div and a footer. The footer has an input box in it. Whenever the keyboard comes up in mobile safari or chrome a small gap is shown betwixt the body and the keyboard. Does anyone know how to remove this horrible gap?
Please see the follow JS Bin on your device: http://jsbin.com/rujexadodu/edit?html,css,js,output
Full code
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<style type="text/css">
html {
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
border: 1px solid pink;
}
.container {
height: 100%;
display:flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.footer {
height: 30px;
background-color: lightgray;
padding: 10px;
display: flex;
align-items: center;
}
.content {
flex: 1;
height: 100%;
width: 100%;
padding: 10px;
}
input {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
This is the body content.
</div>
<div class="footer">
<input type="text" />
</div>
</div>
</body>
</html>
I'm not able to reproduce this on my iPad and nothing is jumping out as wrong in your code. So it might just be a bug in what ever version of Safari you have.
I wrote a library call iFrame-resizer that keeps an iFrame height matched to the content size and working out the content height in different browsers is so unreliable that I have to provide 10 different ways of working it out.
It's not a complete fix, however, setting the background color of the body and html elements to match the footer would make it much less noticeable.
I can't reproduce this so it must be a browser issue.
Here are a couple of things that may help:
Depending on your version of safari, you may need to prefix flexbox:
display: -webkit-box; /* Really old */
display: -moz-box; /* Firefox */
display: -ms-flexbox; /* IE */
display: -webkit-flex; /* Chrome & Safari */
display: flex;
and the flex value:
-webkit-box-flex: 1 0 auto;
-moz-box-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
You need to give flex three values for it to work properly too, they are grow, shrink, and basis, in that order. The default is to allow grow, disallow shrink, and the size to start at 'auto' 1 0 auto.
I think flexbox still works if you don't put flex values on the children, but different browsers can have quirks... so I would make sure that the footer has
flex: 1 0 auto;
rather than
display: flex;
Some links that I find useful:
A complete guide to flexbox
A flexbox mixin for SASS
I need solve some task in vanilla html+css - bootstrap code for desktop browser-based application. So, I can't use libraries such as jQuery or Ext.
There are container 'wrapper' with three boxes - 'header', 'pane', 'content'. I need the following - wrapper and all three boxes always fit into single screen and take 100% of height/width
Header is going to be a toolbar and pane is a fixed height box. Content takes the rest of the screen.
I'm unable to make content fit into the rest of page. Can anybody help me ?
Another problem - I need to have testarea in the pane and content. Of course, there are lot's of such contols but I can't use them because this is bootstrap code.
I've created sample page: http://jsfiddle.net/madhollander/6r4nu/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filterIt</title>
<style>
#wrapper
{
position:absolute;
top:0px;
left:0px;
right:0;
bottom:0px;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#header
{
display: -webkit-box;
width:100%;
background-color:blue;
-webkit-box-orient:vertical;
}
#pane
{
display: -webkit-box;
width:100%;
height:100px;
background-color:black;
-webkit-box-flex: 1;
-webkit-box-orient:vertical;
}
#content
{
display: -webkit-box;
width:100%;
background-color:green;
overflow-x: scroll;
overflow-y: scroll;
-webkit-box-flex: 1;
-webkit-box-orient:vertical;
}
.textbox{
width:100%;
display:block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
resize:none;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body onload='onload();run();'>
<div id='wrapper'>
<div id='header'>
<button type="button">Apply</button>
</div>
<div id='pane'>
<textarea class="textbox" id="command" wrap="off">command sample</textarea>
</div>
<div id='content'>
<textarea class="textbox" wrap="off" id='log'>log sample</textarea>
</div>
</div>
</body>
</html>
You're simply using the Flexbox module incorrectly. Some properties only apply to flex containers, others only apply to flex items. Also never use the old Flexbox properties unless you're also using the modern properties.
http://codepen.io/cimmanon/pen/DcesF
#wrapper {
position: absolute;
top: 0px;
left: 0px;
right: 0;
bottom: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#header {
width: 100%;
background-color: blue;
}
#pane {
width: 100%;
height: 100px;
background-color: black;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
}
#content {
width: 100%;
background-color: green;
overflow-x: scroll;
overflow-y: scroll;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
}
.textbox {
width: 100%;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
resize: none;
overflow-x: scroll;
overflow-y: scroll;
}
What you could do to make this 'fluid' layout is to set the #wrapper to height: 100%;
This stretches it to the body's height (which you should also set to 100% - as some browsers handle this different from others)
Furthermore, you could set a percentage for each element in height which you can always change to your liking, ofcourse you should set min-height rather than height, otherwise your elements will overflow and cause layout glitches.
Your page will then look like this:
http://jsfiddle.net/6r4nu/1/
Not sure I understand your question correctly, but here you go anyway:
If you need the three div's to fill the page vertically, you just need to give your wrapper (and further parent elements) a height of 100%. Then to fill the page, each div gets a height of 33.3%.
like this:
#wrapper{
height:100%;
}
#header, #content, #pane{
height:33.3%
}
If they shouldn't be equally heigh, just re-calculate the percentage so they add up to 100%.
So, this web application I'm working in haves three vertical columns expanding for the entire window height, and a footer div expanding for the entire width. The layout looks like this:
+|+
---
where + means a liquid column, | means a fixed column, and - the footer.
I've done the element positioning using absolute and relative positioning with some tweaks using jQuery. But I want to know if there is a way of doing this with CSS3 only.
Thanks!
This neglects all browser not supporting the box-orient and box-flex properties (like IE).
Demo: http://jsfiddle.net/p8vBC/11/
CSS:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
body > #main {
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
height: 100%;
margin-bottom: -100px;
}
footer {
height: 100px;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
aside {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
#content {
width: 400px;
}
HTML:
<div id="main">
<aside id="left"></aside>
<div id="content"></div>
<aside id="right"></aside>
</div>
<footer></footer>