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
Related
The goal is to position the image to the right of it's container using display: flex; and justify-content: right;. The following code works fine in chrome and firefox but in all the safari versions I've tested it doesn't.
Things I've tried:
Checked caniuse which indicated it should work in all versions I've tested.
Run the css through autoprefixer and added those.
Tested adding the css inline, with no change.
Turned styling on and off in the browser dev tools to check: everything works as expected except the flexbox styling in safari.
Isolated the code to rule out conflicts.
Tried multiple versions of safari including 9.1.2 (forgot to check actual version number for others but they were updated newer devices running catalina and latest iOS so assuming safari 13.x or 14.x).
Here is the jsfiddle demo code
Here is the html and css source code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Safari - Flexbox Issue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container container-nav"></div>
<div class="container container-home">
<img alt="tree image - should be far right of container" src="https://www.clipartmax.com/png/full/3-31530_vector-clip-art-cedar-tree-clip-art.png">
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
.container {
max-width: 960px;
}
.container-nav {
height: 80px;
}
.container-home {
height: 40%;
padding: 2em 4em 0 0;
/* begin flexbox stuff */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
}
img {
max-height: 100%;
max-width: 100%;
height: auto;
}
Any help is greatly appreciated.
Surely the styling should be justify-content: flex-end to get the content to be aligned to the right.
Note that this will have a different layout if you do flex-direction:column - but for simple layouts - flex-start equates to the start of the row (left in a ltr layout) and flex-end equates to the end (right).
.container-home {
height: 40%;
padding: 2em 4em 0 0;
/* begin flexbox stuff */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: flex-end;
-ms-flex-pack: flex-end;
justify-content: flex-end;
}
and here is an image of the jsfiddle with those changes made and teh expected aligned right image
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I am making my first web application. It is my first time working with html/css/js. This seems to be a common question/issue with css, but I have trouble understanding/making the solution work. This is the closest I've gotten.
I am struggling to make the app (specifically wrapper or body) encompass only the height of the page (no more or less).
If there is little content, content doesn't extend all the way down and the footer is at the middle of the page. Although, adding height: 100%; to html seems to fix this.
If I add a lot of lines to calendar or sidebar, a scroll bar is added to the whole page instead of only calendar or sidebar. height: 100%; in html doesn't seem to fix this.
The width for content seems to work well.
I have tried changing the height for body and wrapper but it doesn't seem to do anything?
Adding overflow: hidden; to body doesn't seem to work either.
Help is appreciated. Thank you.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
header {
text-align: left;
flex: 0 0 auto;
padding: 20px;
}
#content {
display: flex;
flex-flow: row;
width: 100%;
flex: 1 1 auto;
}
#sidebar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 0 0 20%;
background-color: #00e7eb;
}
#calendar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 1 1 auto;
background-color: #c8eed6;
}
footer {
text-align: center;
flex: 0 0 auto;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Journal</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="currentCalendar">Quarter</h1>
</header>
<div id="content">
<div id="sidebar">
<h4>Calendars</h4>
<button>+ Add Calendar</button>
<h4>Classes</h4>
<button>+ Add Class</button>
<h4>Tags</h4>
<button>+ Add Tags</button>
</div>
<div id="calendar">
<p>No calendar. Click '+ Add Calendar' to make new calendar.</p>
</div>
</div>
<footer>
<p>dg</p>
<button>Donate</button>
</footer>
</div>
</body>
</html>
I would go with min-height: 100vh;. Should be noted though, 100vh can be tricky when it comes to mobile depending on your design. You can also try
html, body { min-height: 100%; }
Try adding height: 100vh; to the target element.
in CSS height % values only work if the parent container has a set height. So if you want to adjust the main body to 100% display height you can do:
body{
height: 100vh; /*viewport-height=100% of screen height*/
}
and then you can set the first child of that to 100%
I've created a website with a flexbox-based structure. My goal was to have the entire viewable page filled by divs, but to avoid letting any divs push below the lower limit of the browser window. One of my divs should scroll when the text overflows, but in Firefox it instead affects the entire page.
Here is my HTML:
<div class="header_bar">header</div>
<div class="page_grid">
<div class="pg_nav">nav</div>
<div class="pg_main">This is the div that should scroll</div>
<div class="pg_sidebar pg_sidebar2">sidebar</div>
</div>
And here is my CSS:
html, body
{
padding: 0;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.header_bar
{
flex: 0 0 auto;
}
.page_grid
{
flex: 1;
display: flex;
}
.pg_nav
{
width: 25%;
}
.pg_main
{
width: 50%;
overflow-y: auto;
}
.pg_sidebar
{
width: 25%;
}
Everything works completely fine in Chrome and Safari, but there are problems when I load the website in Firefox. I created a pen of the site here. Does anyone have any advice on how to make this show up the same across all three browsers?
Thanks so much!
As stated above by magenetwd, this is a known firefox bug, when I added min-width:0;min-height:0; to .page_grid, the problem solved.
.page_grid
{
flex: 1;
display: flex;
color: #FFFFFF;
/* Firefox bug fix styles */
min-width:0;
min-height:0;
/* End of Firefox bug fix styles */
}
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);
}
I am generating one html page having one tab pane which is very long. So i want to add scroll pane so that visualisation could be better. I found few good examples using div but code becomes very messy with other div so i prefer not to use div.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Independent CSS scrolling panels (with inertia)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="Top">Top Content</div>
<div class="Container">
<div class="Left">Left Content</div>
<div class="Middle">Middle Content</div>
<div class="Right">Right Content</div>
</div>
</body>
</html>
CSS code:
/*I love me some border-box*/
* {
box-sizing: border-box;
}
/*This just stops me getting horizontal scrolling if anything overflows the width*/
body {
overflow-x: hidden;
}
/*Just removing default browser padding/margin*/
html,
body {
padding: 0;
margin: 0;
color: #ebebeb;
}
/*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/
.Top {
display: flex;
align-items: center;
justify-content: center;
background-color: darkgreen;
font-size: 3rem;
position: relative;
z-index: 10;
height: 100px;
}
/*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/
.Container {
display: flex;
overflow: hidden;
height: 100vh;
margin-top: -100px;
padding-top: 100px;
position: relative;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
/*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
*/
.Left,
.Middle,
.Right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
/*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/
.Left::-webkit-scrollbar,
.Middle::-webkit-scrollbar,
.Right::-webkit-scrollbar {
display: none;
}
/* Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/
.Left {
width: 12.5rem;
background-color: indigo;
}
.Middle {
flex: 1;
}
.Right {
width: 12.5rem;
background-color: violet;
}
Can pls someone pls help me how can i implement it.
I suppose you could use a <table>:
table {
display: block;
height: 500px;
overflow-y: scroll;
}