<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
Related
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="stylesheet" href="profilepage.css">
</head>
<body>
<!-- Start your code here -->
<div class="profile-box">
<div class="bg">
<img src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>
</div>
<!-- End your code here -->
</body>
</html>
profilepage.css
.bg {
width: 100%;
height: 10%;
}
Comes out like this: on my page
What I want is the width to cover the entire first row and the height to be 10% of the page. i.e.
Where the black line ends the img
I've been playing with width and height forever bu nothing is working. The moment I change width something large comes up. Even if I let the width be less. I don't know why width is changing the height. What am I doing wrong?
Percentage heights refer to the height of the immediate parent. If the parent height is not set, the CSS will do nothing. You can either cascade a 100% height setting down from the body tag or you can apply some fixed value to the image tag's immediate parent.
Fixed Value (Uses view height to refer directly to height of the body tag)
<div style="height: 10vh;">
<img style="max-height: 100%;" src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>
Cascading Height
.bg {
width: 100%;
height: 10%;
}
body {
height: 100%;
}
.profile-box {
height: 100%;
}
html {
height: 100%;
}
img {
max-height: 100%;
width: 100%;
}
In both cases, we must restrict the image height by the parent class or no changes will take effect.
I used these sources:
How to make a div 100% height of the browser window
and
Make an image to fit its parent dimensions
Try this, You need to define height and width of every element otherwise the css don't know which element have what value.
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.profile-box {
width: 100%;
height: 100%;
}
.bg {
width: 100%;
height: 10%;
}
.bg img {
width: 100%;
height: 100%;
}
This is my Three divs.
<div class="header">
<div>#ViewBag.Title</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
This is my CSS.
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header
{
height: 10%;
width: 100%;
background-color: whitesmoke;
text-align: center;
}
.content
{
height: 80%;
width: 100%;
background-color: white;
}
.footer
{
height: 10%;
width: 100%;
background-color: whitesmoke;
}
</style>
Now I want that the child div inside my parent Header div will be flexible. Whenever i change my browser size the child div inside the parent header div will also get resized according to my browser size. And will stay inside the header div. Please help.
.header div
{
height: 100%;
width: 100%;
}
Use this for child div.
If set a child div's width is 50%. It filled in 50% of it's parent.
Do not set a height for the header element!
When dealing with responsive design, I try to avoid setting a height whenever possible. If you really need to set a height, do so on the child element, which then forces the header to have the height of its child.
use this in ur css
display-inline:block:
I've got the following HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body, div, html {
margin: 0;
padding: 0;
}
body {
background: #727272;
}
#div1 {
background: #F00;
height: 50px;
}
#div2 {
background: #F0F;
height: 50px;
width: 1500px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
If I shrink the browser window down to less than 1500px (the width of div2), and then use the browser's horizontal scrollbar to scroll to the right, the width of div1 remains cut off at the width of the browser window, and does not stretch all the way across the screen like div2.
Is there any way to get div1 to always stretch across the screen, regardless of the width of div2?
Please note that in my real code, the width of div2 is always changing, so I cannot just set a fixed width for div1 via CSS.
Thank you.
Try this.
#div1 {
background: #F00;
height: 50px;
width: 100%;
}
In your css try
display: block;
put a wrapper around these two divs...
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
</div>
Then style the wrapper and divs accordingly
#div0 { display:table; }
#div1 {
display:block;
width: 100%;
background: #F00;
height: 50px; }
#div2 {
display: block;
background: #F0F;
height: 50px;
width: 1500px; }
http://jsfiddle.net/Ls7aj/
Using overflow:hidden on the body, html, #container will do the trick.
Add a width:100%; to #div1 and you're good to go.
http://jsfiddle.net/tCN8H/
Edit: Changed #Content to #container
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
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>