I've been breaking my head the past two days figuring this out. Basically, i am creating a one page layout, where the first block takes the width and height of the screen and the second block needs to be relative.
Example: http://www.shegy.nazwa.pl/themeforest/exit/normal/
<body>
<div id = "block1">
This is block 1 taking 100% width and height of screen.
</div>
<div id="block2">
Block 2 is relative to block 1
</div>
</body>
The trick is to add height: 100%; and margin: 0; to the body/html. Then it works wonders :).
HTML:
<div id="box1">HELLO HELLO THIS IS RED BOX, ARE YOU HEARING ME BLUE?</div>
<div id="box2">YES, RED, I'VE GOT YOU LOUD AND CLEAR. OVER. <div>
CSS:
html, body {
height: 100%;
margin: 0;
}
#box1 {
min-height: 100%;
min-width: 100%;
color: white;
background-color: red;
}
#box2 {
min-height: 100%;
min-width: 100%;
color: white;
background-color: blue;
}
FIDDLE:
http://jsfiddle.net/ewzLM/1/
Related
I'm looking to build a gantt chart with the days, months and years across the top and the tasks below them.
Here is what I have so far:
So in the image above, the scroll-x is working on everything including the blue, red and yellow divs and the grey div below them. This is to ensure that as you scroll across, the days stay with the contents of the grey div. scroll-y is only acting on the grey div with the blue campaign name div in it.
Here is the problem:
The problem is that when you move the scroll-x of parent, the scroll-y moves across the screen (so that it is sitting in the middle of the parent div). What I'm looking to do is have the scroll-x work on all of the parent's content and the scroll-y only work on the grey div but for the scroll bar to stay on the far right of the parent.
Any advice would be really appreciated and thanks in advance.
css:
.container {
position: relative;
}
.parent {
overflow-x: scroll;
overflow-y: hidden;
height: 100%;
width: 100%;
position: absolute;
}
.date {
width: 2000px;
height: 25px;
float: left;
}
.hold_content {
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 50px)
}
.content {
height: 2000px;
width: 2000px;
float:left;
}
html
<div class="container">
<div class="parent">
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="hold_content">
<div class="content"></div>
</div>
</div>
</div>
So, the scrollbar is relative to whatever it's scrolling, which, here, is the hold-content div. And, unfortunately, when that's set to its full width of 2000px, that means the scroll-y scrollbar is not visible because it's offscreen, like so:
html {
box-sizing: border-box;
font-family: sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body,
.container,
.parent {
height: 100vh;
}
html,
body,
div {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.parent {
overflow-y: hidden;
}
.date {
height: 25px;
width: 2000px;
}
.date:nth-of-type(1) {
background: blue;
}
.date:nth-of-type(2) {
background: red;
}
.date:nth-of-type(3) {
background: yellow;
}
.hold_content {
background: silver;
height: calc(100vh - 75px);
overflow: scroll;
width: 2000px;
}
.content {
height: 2000px;
text-align: center;
width: 2000px;
}
<div class="container">
<div class="parent">
<div class="date">Year</div>
<div class="date">Month</div>
<div class="date">Date</div>
<div class="hold_content">
<div class="content">
<button>Campaign Name</button>
</div>
</div>
</div>
</div>
Not sure if that's ideal or what you were going for. If you want the scrollbar to always be connected to the window (as it is by default), you're probably better off not scrolling these individual divs and instead using position:fixed on your date divs.
Note that this solution uses both viewport units (http://caniuse.com/#feat=viewport-units) and calc (http://caniuse.com/#feat=calc). Also, my code doesn't perfectly mirror your CSS because the code you provided didn't match up with your screenshots.
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 a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
<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