I'm wondering if it's possible to get rid of vertical scroll having 3 rows viewing on a mobile device that should fit/stretch to the height of screen's and shrink when the screen height is smaller than it should be, so if there's a taller device all elements would grow proportionally to fit the whole screen's height instead of having the scrollbar that appears every time when the sum of height of the container's elements is bigger than the screen's height. What properties should I use? Thank you.
You can do it with CSS Flexbox. I am posting an example that I believe creates the effect you want.
In the HTML there are three rows (header, main, footer) wrapped inside a div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<header>
<p>Header</p>
</header>
<main>
<p>Main</p>
</main>
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>
and the CSS:
html, body {
margin: 0;
padding: 0;
}
div {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
header {
background-color: lightblue;
flex: 1 1;
}
main {
background-color: lightcyan;
flex: 1 1;
}
footer {
background-color: lightgreen;
flex: 1 1;
}
You can use CSS grids and set a template with 3 rows and set the height of each row-elements to 33.33333%. This makes sure that the elements take the whole screen.
Related
I'm trying to create a grid with black boxes on the left and right side of the container, and a gray box in the center that contains different elements. The boxes on the left and right should have a width that's half of the container's height, and the middle item should stretch to fit it's content, but the entire container shouldn't be wider than the parent element. Here's what it should look like.
This is the HTML and CSS that I wrote:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
}
#container {
display: grid;
max-width: 100%;
grid-template-columns: min-content auto min-content;
width: fit-content;
}
#middle {
background-color: gray;
}
#left,
#right {
aspect-ratio: 1 / 2;
background-color: black;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="right"></div>
</div>
</body>
</html>
The code works as expected until I set the height of html and body to 100% like so:
html,
body {
height: 100%;
}
When I do this, the left item no longer appears on the page. Here's a screenshot of this. Oddly enough, if I set the margin of body to 0, then the left item appears properly.
I tried reordered the elements in #container so that #left and #right are the last elements in the container, and I used grid areas to force #left to appear on the left side.
/* Added CSS properties */
#container {
grid-template-areas: 'left-side middle-side right-side';
}
#middle {
grid-area: middle-side;
}
#left {
grid-area: left-side;
}
#right {
grid-area: right-side;
}
<!--Modified HTML-->
<div id="container">
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
This made the left item appear, but it overlapped into the middle container, cropping out the beginning of the text. This is what the result looked like.
I know that the problem is rooted in the aspect-ratio property because, if I remove it, and set the width of #left and #right to a value such as 400px, #left appears properly.
Does anybody know how can I make the grid appear properly? Is there perhaps another way I can achieve the same effect as the aspect-ratio property?
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 5 years ago.
I'm trying to create a flexbox container that uses flex-wrap: wrap but once it's wrapped is only as wide as it needs to be, that way it can be centered.
Right now, once I resize the window small enough that the elements wrap, the element continues to use up the maximum width it can, thus causing it's child elements to be pushed all the way to the left.
Here's a link to my Plunker
Here's a gif of me resizing the window. As you can see, when the green and red divs have enough space to be on the same line they appear centered, but not when they wrap. Preferably, there should be as much whitespace to the left of the red div as to the right of the green div.
Preferably, when the rows wrap it should look like this:
Any help would be greatly appreciated!
You don't want widths on your block elements (the red and green boxes) within the flexbox container. That is similar to a "responsive" design pattern rather than flex.
Flex width (or height) stays the same no matter what. Therefore, be sure to size the container, and flex its children.
.flex-container {
width: 25%;
height: auto;
margin:auto;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
.green-block{
/*min-width: 200px;*/
background-color: green;
padding: 10px;
display:flex;
}
.red-block{
/*min-width: 300px;*/
background-color: red;
padding: 10px;
display:flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="flex-container">
<div class="flex-row-wrappable">
<div class="red-block">I'm a red block</div>
<div class="green-block">Imma green block, and I have more width than my red counterpart.</div>
</div>
</div>
</body>
</html>
Please take look at the following page on mobile:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="wide">WIDE</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
The fixed element is there at the bottom right as expected. However, when you increase the width of the wide div past your device viewport width (in css pixels), the fixed div disappears.
Why does this happen? Is there a way to prevent this behaviour?
Further details:
An easy way to test this is to use mobile view in Chrome DevTools, and change the width directly under Elements > Styles.
Close to the limiting width you see the fixed div cut off horizontally.
Same thing without meta viewport, but the threshold will be at the default viewport width 980px.
Tried combinations of height: 100% and min-height:100% on html and body with no success.
No issues in desktop browser.
Answering my own question here.
I am not sure why the fixed div is not rendered. It is somehow related to the fact that the 'wide' div overflows the body element, causing the view to be zoomed out and the body ending up less tall than the viewport. I still believe that the mobile browser should show the fixed element just like the desktop browser does.
My fix: wrap the wide content in a container element with overflow-x: scroll. This works well on mobile, the fixed div is shown again and the wide content can be swiped across.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="ctnr">
<div id="wide">WIDE</div>
</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#ctnr {
overflow-x: scroll;
}
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
Not sure if this will help you but I added display: table-cell; to #wide.
This way your div won't exceed the maximum width.
Quite simple question but tried about everything.
what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.
This is the css line i have now:
.container { width: 100%; float: left; display: inline; }
I cant get them to line up next to each other.
Here is a visual to make it more clear.
image url for bigger preview: http://www.luukratief.com/stackoverflow.png
The scrolling part is not the issue for me, just the placement of the divs.
Is this possible using percentages or is this simply not possible.
If so, please tell me how to do this with css.
Thanks in advance!
You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.
For example:
<div class="container">
<div class="contentContainer"></div>
<div class="contentContainer"></div>
</div>
And CSS:
.container {
width: 200%;
}
.contentContainer {
width: 50%;
float: left;
}
How does this look to you?
http://jsfiddle.net/2wrzn/19/
Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.
you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.
If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..
Example Fiddle
HTML Code:
<div class="container" id="p1">Page 1 => Next page</div>
<div class="container" id="p2">Page 2 => Next page</div>
<div class="container" id="p3">Page 3 => Next page</div>
<div class="container" id="p4">Page 4 => Next page</div>
<div class="container" id="p5">Page 5 => Next page</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%;}
body {white-space: nowrap;}
.container {
display: inline-block;
width: 100%;
height: 100%;
}
.container {
display: inline !ie7; /* for working inline-blocks in IE7 and below */
}
.container * {white-space: normal;}
#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}
If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.
If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.
You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)
<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>
The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:
<html>
<head>
<style type="text/css">
body{
width:200%;
margin:0%;
padding:0%;
}
#dvScreen1, #dvScreen2{
width:49.95%;
height:80%;
clear:none;
}
#dvScreen1 {
float:left;
border:solid black 1px
}
#dvScreen2{
float:right;
border:solid blue 1px
}
</style>
</head>
<body>
<div id="dvScreen1">
<p>Screen 1 stuff ...</p>
</div>
<div id="dvScreen2">
<p>Screen 2 stuff ...</p>
</div>
</body>
</html>
I've set up my problem here.
I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.
Any ideas? Thanks much in advance!
Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).
Here's an example (you can view it at http://ve.savantcoding.com/example.html)
<html>
<head>
<title>sample footer</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* bottom margin is negative footer height */
}
#content {
padding-bottom: 200px /* bottom padding is footer height */
}
#footer {
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>