This question already has answers here:
Limit flexbox height to browser window (currently it's overflowing causing vertical scroll)
(2 answers)
Closed 3 years ago.
Is there a way to make a flexbox container the same size as the window?
If you want some element, flex or not to be the same size as your window, then you are looking for viewport units, wich are vh and vw.
If you want to achieve the height of the window, you want height: 100vh;, and if you want the width of the window, you want width: 100vw;
You can also use bouth.
Use the snippet below. This will fit the element to the size of the entire page.
.flexbox-container {
background-color:blue; // just to show element filling page.
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%;
}
<div class="flexbox-container"></div>
To make flexbox container the same size as the window add the below given properties to the flexbox container :
height:100vh;
width:100%;
*{
margin:0;
padding:0;
}
.flexdiv{
height:100vh;
width:100%;
background-color:lightgreen;
}
<div class="flexdiv"></div>
Related
I have a div fixed inside a relative one.
my problem is, the div fixed is bigger than the other, but they have the same size:
<div id=all>
<div id=top></div>
</div>
.
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:fixed;
background:rgba(255,0,0,.5);
}
https://jsfiddle.net/y7yc0n21/
I need div top to be fixed.
what is wrong? Why div top is bigger than div all?
The width of the fixed element is calculated in regard to the viewport width, whereas the one for the other is calculated in regard to the width of its parent element, which is body in this case.
And the width of body is different from the viewport width, because body gets a default margin and/or padding applied from the default stylesheet – so you are taking 80% of two different input values, and therefor the results are different as well.
Eliminate the default margin/padding for body, and the problem is gone:
body {
margin:0;
padding:0;
}
https://jsfiddle.net/y7yc0n21/2/
If you specify
body {
margin:0;
}
they will become the same width.
Also I think that is not what you want as fixed is calculated relative to viewport.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
https://developer.mozilla.org/en/docs/Web/CSS/position
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:absolute;
background:rgba(255,0,0,.5);
}
If you give any element
position: fixed
it makes the element relative to the viewport instead of it's offsetParent. Therefore, the width of div 'top' is calculated 80% based on the width of the viewport and not on the basis of its parent div 'all'. So, your inner div has greater width than outer one.
I have a main div that it re-sizes with re-sizing window. I want to add 2 div inside the main div (float left and right). left one width is 165 and right one width is the rest size of main div. can I simply use something in CSS?
#leftDiv{
height:100%;
width:165px;
float:left;
background-color:#244378;
}
#rightDiv {
height:100%;
width:100% - 165px;
float:left;
background-color:#244378;
}
If you really want do it this way, you can use the CSS3 calc property, but keep in mind that this isn't supported in all browsers:
#rightDiv {
height:100%;
width:calc(100% - 165px);
float:left;
background-color:#244378;
}
No! you cannot use a value like "100% -165px".
Instead you can just remove "float:left" and "width:" from #rightDiv.
That should work for your case.
You have to remofe float:left from #rightDiv and set width to auto in this way:
#rightDiv {
height:100%;
width:auto;
background-color:#ff0000;
}
If you do this, the right div will always appear near the left div and will have a dynamic width.
Take a look at this: http://jsfiddle.net/b9BrB/1/
This question already has answers here:
Set position absolute and margin
(10 answers)
Closed 9 years ago.
I have a div along the left side of my webpage that expands to varying heights depending on its contents. Sometimes its inner contents causes the div to expand to the bottom of the page. However, I want there to be a margin at the bottom, so it doesn't actually go to the bottom of the page. How can I add the necessary margin? I tried adding margin-bottom:50px to .wrap, but it didn't work.
HTML:
<div class="wrap">Contents</div>
CSS:
.wrap {
position:absolute;
top:40px;
min-width:220px;
left:0;
}
use bottom:50px; to .wrap div. you positioned div so you can set position by left,right,top,bottom. It will be always 50px up from bottom.
.wrap {
position:absolute;
top:40px;
min-width:220px;
left:0;
bottom: 50px;
}
I had overflow:hidden; in the class wrap. That was the problem.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Vertical centering variable height image while maintaining max-width/height
So here is a question, I've got image of not fixed size, I know only that the height or width must be 200px. Now I want to put this image in div which is fixed size 200px x 200px and center it vertically and horizontally. Is it possible?
I searched a lot of questions but none of them answered mine, which should be crushial to solve them all.
Basic idea taken from this answer. Doesn't rely on display:table-cell; which isn't supported by IE7.
The Code (demo)
<div class="image-wrapper"><img src="http://example.com/image.png"></div>
.image-wrapper {
position:relative;
width:200px;
height:200px;
}
.image-wrapper img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
You can make it display like a table cell:
http://jsbin.com/ijoved/1/
/* This is item wrapping each image */
.item {
height: 200px;
width: 200px;
display:table-cell;
vertical-align:middle;
text-align: center;
}
I was trying to horizontally center an image (logo) for every screen size doing something like this
#container {position:relative width:100%; height:100%;}
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}
and it's not working. Do I maybe have to use a width for container in pixels?
#logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}
#logo { height:100px; margin:0 auto; width:500px; }
This is the standard way of centering an image by telling it to automatically determine the space on both the left and right of a fixed size container.
And an example.
I guess it depends on how you define "responsive", but if you mean responsive in the sense that content resizes to accomodate the width of the viewport, then all of the other answers don't meet this criteria since they rely on fixed pixel widths. For example, what happens if the view port is less than 500px?
A similar concept will work with percent widths, and actually be responsive, in that the thing you're centering will be flexible too:
#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}
If you don't want the "logo" element to get to big (on huge screens), you can add max-width:600px; to limit it, but you'd need to add some media-queries to keep it properly centered on large screens.