I have this example layout.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
padding: 0;
min-width: 960px;
height: 500px;
border: 1px solid red
}
.boxed-layout .wrapper {
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.inner {
width: 960px;
position: relative;
margin: 0 auto; /* main width */
}
.responsive .inner {
max-width: 960px;
width: auto;
}
</style>
</head>
<body>
<div class="inner wrapper"></div>
</body>
</html>
Now I need to add a div full width into wrapper. So i tried this way
.banner {
position: relative;
left: -100px;
max-width: 2000px;
width: auto;
border: 1px solid green;
height: 400px;
}
and
<div class="banner"></div>
but does not work well.
Is it correct to use relative positioning with negative left to move it to zero?
If I use width: 2000px instead of auto, appears the horizontal scroll bar
So, how can I have the full width and responsive?
You have to remove position:relative from your wrapper container (i.e. inner class contrainer). Then for banner use following markup:
HTML
<div class="banner">
<div class="banner-inner"></div>
</div>
CSS
.banner {
position: absolute;
left: 0;
right: 0;
}
.banner-inner {
position:relative;
margin:0 auto;
max-width: 2000px;
}
If you dont want to remove position:relative for some reason then you have to use javascript/jQuery as follows (keep markup same as above):
var marg = ($(window).width()-960)/2;
$('.banner').css({'left':-marg+'px','right':-marg+'px'});
Just give width: 100% for your div inside the wrapper. Sounds good?
.banner { border:1px solid green;height:400px;}
do not give width it's automatically take full width
According to the accepted answer, the OP's actual problem is that there is one 960px width container & there is a child div which needs to be 100% of body (not the parent) as per screen size. This as as easy as
.banner {
width: 100vw;
}
No need to change any other original properties.
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.
1vw =1/100th of the width of the viewport
-- MDN
Related
I am trying to create a responsive image gallery (JSFiddle) with CSS Grid but when I add images to the grid elements, the images don't fill their entire size. I don't care about aspect ratio, I just want the image to fit exactly into the parent div while the size of the parent div remains the same (squared).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
width: 100vw;
}
.view-container {
padding: 20px;
width: 70%;
margin: auto;
border: solid red;
display: flex;
justify-content: center;
}
.view-grid {
flex: 1 1 auto;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
list-style: none;
}
.grid-el-container {
width: min(300px, 100%);
padding-bottom: min(300px, 100%);
background: blue;
border: solid;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
}
.grid-el-bg {
max-height: 100%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>CSS Grid</title>
</head>
<body>
<div class="view-container">
<div class="view-grid">
<div class="grid-el-container">
<div class="grid-el-content">
<img src="https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="villa" class="grid-el-bg">
</div>
</div>
<div class="grid-el-container"><div class="grid-el-content">Box 2</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 3</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 4</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 5</div></div>
</div>
</div>
</body>
</html>
There are 2 main problems here. The first is that the div containing the element doesn't take up its entire parent, so the image is already at 100% height and width. The second is that you're only setting the max height and width of the image, not the actual height and width.
Let's address the parent first. This can simply be solved by adding width: 100%; and height: 100%; to the parent div. If you only want the div to have 100% height and width if it has an image inside of it, you will probably have to write some JavaScript to handle that.
Now let's go to the actual image. Really it's a matter of adding the exact same thing here (width: 100% and height: 100%). This alone should resolve your issue, but there is one more thing I would like to add. I know you said you don't care about the aspect ratio, but, if you would rather the image be cut off than distorted, you can use object-fit: cover; here as well.
Here is a JSFiddle with the revised CSS
The completed CSS after the changes:
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
width: 100%;
height: 100%;
}
.grid-el-bg {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
Try this:
.grid-el-bg {
object-fit: cover;
}
Remove min-width and min-height from this class.
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I am trying to make the container occupy the complete height of the desktop screen.
I can set the height of the divs to some pixels and occupy reasonable height.
But if viewed on large screens, the bottom of the container is visible, which is empty space.
Can I make the container occupy the complete height for all screens?
What you need is a sticky footer.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Read about it here. here's a demo.
Is this what you want?
<html>
<head>
<style>
html, body, div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
display: block;
}
</style>
</head>
<body>
<div>Full screen size</div>
</body>
</html>
Yes, you can make sure its position is relative to the parent element and give all its parents a height of 100 %. Try this
html, body{
height:100%;
position:relative;
margin:0;
display:block;
}
.mydiv{
height:100%;
position:relative;
background:red;
display:block;
}
In IE if you do not assign to all parents a height of 100% the child div may not have a full height..
I don't know if it is what you need: fiddle
html,
body {
border: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
height: 100%;
}
And HTML:
<div>Hello</div>
You can use CSS viewport units such as vh and vw to define dimensions in relation to the viewport size:
div {
height: 100vh;
}
means "make the div 100% the height of the viewport".
body {
margin: 0;
}
main {
width: 50%;
height: 100vh;
background-color: aliceblue;
}
<main>
</main>
I would like to have a html/css layout, which has a div#header and div#body as direct children of body tag. I want div#body to fill the remaining space and I do not want to use JavaScript. I know it is possible if you know the exact height of the div#header. But i do not want to fix that.
example with fixed div#header
<head>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
width: 100%;
}
#header {
position: relative;
<!-- i want to remove height because i want the header to size itself
dependent on it's content -->
height: 100px;
background-color: red;
}
#body {
<!-- I want to make the body position relative and set top to 0
but that does not work as expected.-->
position: absolute;
top: 100px;
margin: 0;
bottom: 0;
background-color: green;
height: auto;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="body">body</div>
</body>
Please let me know if there is any alternative which uses divs and css.
Many thanks in advance!
You can set the min-height of the body div to 100% to stretch out the body div (I've changed the body bg color to make it more obvious).
However, I'm not 100% clear on your second requirement (<!-- I want to make the body position relative and set top to 0 but that does not work as expected.-->)
Fiddle here
Here is the updated answer: what i have done is to make the parent html and body to display as a table and other divs to have properties of table row and this css will make them capture the whole screen area.
Now i have given the header height of auto.
and
#body is inheriting the other space.
Try this: http://jsbin.com/ezozeb/5/edit
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display:table;
}
#header {
background-color: red;
display:table-row;
height:auto;
}
#body {
background-color: green;
display:table-row;
height:inherit;
}
First of all, delete the height and width of the body element.
You can use page wrappers to make that happen:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#PageContentWrapper
{
width: 659px;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}
The pagecontentwrapper sets the minimum height to 500px.
In html you can then assign these identifiers to the body and divs
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
If you want to make a div scrollable, you should define a height and/or width and add this to the css:
overflow-x:auto; <!--horizontal-->
overflow-y:auto; <!--vertical-->
For example, if you set the pagewrappers height to 1000 (not the min-heigt) and overflow-y: auto; then the scrollbars will appear when content get out of bounds.
If you want to make the header always on top, you should apply something like this:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#Header
{
background-color:#aaaaaa;
width: 844px;
height: 240px;
}
#PageContentWrapper
{
width: 659px;
height: 700px;
overflow-y: auto;
float: left;
background-color: #e1e1e1;
padding: 10px;
}
and in html
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id=Header>
Headertext
</div>
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
<html>
<head>
<style>
html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
* { margin: 0; padding:0; }
.topbar {
min-width: 100%;
min-height: 50%;
background-color: green;
}
.fill {
min-width: 100%;
min-height: 50%;
background-color: white;
}
.container {
min-width: 100%;
min-height: 50%;
background-color: blue;
}
</style>
</head>
<body>
<div class="topbar">
"topbar
<div class="fill">
"fill"
<div class="container">
"container"
</div>
</div>
</div>
</body>
</html>
Why "fill" is not taking the complete 50% of its containing element "topbar" on the screen?
Why "container" is not taking complete 50% of its containing element "fill" on the screen?
Separate Question:
My goal is to create a layout which can fit almost all screens desktops/laptops. I am not focusing on phone screen layouts for now. I am trying to use width and height as percentages for my layout. Please suggest if that is the right approach or point me to alternatives.
Because the body's height is uncertain.You need a parent dom
When you use percentage for height and width, it's important that the parent element has specific size in pixel...
in this case "topbar" class should have size in pixel