I'm creating a full screen (html, body {height: 100%}) web application and have a screen which has a form in the top (approximately) half, and some other information with two buttons in the bottom (approximately) half.
What I'm wanting to do (being a touch screen in an industrial environment) is to make these buttons as big as possible. So they have height: 50% inside the bottom container.
The question is: how do I get the top half to take the height it requires, and the bottom to take the rest? i.e. is it possible with CSS (2.1 preferably, but 3 is good too)?
There's no way to make an element in CSS 2.1 to take up the rest of the space vertically. Block elements, like Div tags, will automatically stretch out to fill a space horizontally, but won't do it height-wise. This means that you can't get something, like a content page or your buttons, to stretch out to fill rest of the empty space.
The best way to achieve something like this is with tricks, or knowing exactly how high each element will be. For instance, if you know the exact percentage that the other elements will be, you can hard-code a percentage into your stylesheet as described, here. Another trick would be by making the bottom element fill the entire window, and hiding the top half with the form.
Tables, however, are the only elements which will stretch to fill a vertical space. That might be the only solution available to you. An example of this is shown below:
<form ...>
<table id="container">
<tr><td id="top">Form elements go here</td></tr>
<tr><td>Buttons go here</td></tr>
</table>
</form>
And the CSS:
#container {
height: 100%;
width: 100%;
}
#top {
height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}
.buttons {
height: 100%; /* Used to stretch the buttons to fill the element. */
}
the HTML:
<div id="c">
<div id="topHalf"></div>
<div id="bottomHalf"></div>
</div>
the CSS:
#c {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#topHalf, #bottomHalf {
height: 50%;
width: 100%;
background: #00f;
}
#bottomHalf {
background: #f00;
}
You can place your buttons inside the bottom half.
try something like this :-
<html style="height: 100%">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%">
<div id="top" style="background-color: #cccccc; height: 50%">form here</div>
<div id="bottom" style="background-color: #eeeeee; height:50%">buttons here</div>
</body>
essentially height:100% just tells the div to be as big as its parent, and this carries on up the chain of parent objects. you'll notice that if you remove the height:100% on the html tag that all the inner children will just collapse up.
hth
EDIT: I just realised this is appropriate if using tables. If using a div then it's a little harder... a JavaScript function to manipulate the height of the bottom element using the style property in the element. Have a look at this previous question that may help with the JavaScript
ORIGINAL ANSWER
Try putting in the CSS for the bottom half of the application
min-height:50%;
Then specify no height in the top half section.
This will mean the bottom half with the buttons will be at least 50% of the screen area being able to become bigger as required and the bottom half will take the remaining section.
Personally I make this a little smaller than what I expect to use, e.g. instead of 50% I may use 30%, this means I'm getting the most out of my screen real estate but it may not be appropriate in your app.
I hope this helps ;-)
Related
I have been fiddling around with this for some time now, but I still don't understand how it should be done.
I would like the image to be maximized (100%/100%) in the background of the itemtemplate div, but right now it just makes it fit inside the div which is 250px/250px.
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle">
</h6>
</div>
</div>
Any ideas ? thx.
You can position the image absolutely and set the height and width to 100% in your CSS files.
.itemtemplate > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Just make sure you remember to position the parent div and the other children of .itemtemplate relatively:
.itemtemplate, .itemtemplate > div {
position: relative;
}
The parent needs to be positioned relatively to ensure the img is positioned within that element. The other children of the parent need to positioned relatively to ensure that they are drawn above img (as positioned elements are drawn after static elements). If you have trouble seeing the other child elements then you can set their z-index.
Working example: http://jsfiddle.net/sjsNJ/
Need to use CSS background-image.
div.itemtemplate
{
background:url(PATH_TO_IMAGE);
background-size:100% 100%;
background-repeat:no-repeat;
}
See site below for more info.
http://www.w3schools.com/cssref/pr_background-image.asp
I am not familiar with the attributes you are using. But, in order to use an image for the background. There are couple of ways.
If it is <body> or <table> you can also define them by using doing something like this
<body background="link/to/image.jpg">
But the global way, which every element supports would be to define them using CSS
<div style="background-image: url("link/to/image")">...</div>
Now, coming to the image part
Whenever you are using a background image,
It is never going to re-size to fit the container. Unless you use CSS3.
/* CSS3 Snippet to resize a background */
div
{
background-image:url("link/to/image");
-moz-background-size:80px 60px;
background-size:80px 60px;
background-repeat:no-repeat;
}
If the container is big, it will start repeating itself to fill the area. Which can be controlled to repeat or not repeat. Like
div {
background-image: url("link/to/image");
background-repeat: no-repeat; /* similary repeat-x and repeat-y */
}
However, what you are trying to use in using a <img /> to act as a background, which is semantically wrong and I do not recommend it.
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
I recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.
I have a list of dynamically generated divs that represent panels for selecting various options. There are two types of divs, regular ones and short ones. The height of the regular divs is set with javascript to te height of the tallest one. Additionally, if the height of te short div is less than half of the maximum it is set to half of that height, otherwise it is set to the full height.
What I would want to do now (preferably with CSS) is to list those items in such a way that if there is enough space, to put one short div below another sort div.
Here are some illustrations to hopefully make things clearer:
As far as I can see, this is not possible purely with CSS: If you provide the small boxes with clear: left, they will appear below all others. If you don't, they will appear next to each other.
The simplest workaround I can think of is to manually group two small boxes into a separate div. Here's a working example:
<html>
<head>
<style type="text/css">
div.large, div.small { width: 40px; margin: 5px; }
div.large { height: 95px; background-color: blue; }
div.small { height: 45px; background-color: red; }
div.large, div.smallblock { float: left; }
</style>
</head>
<body>
<div class="large">1</div>
<div class="large">2</div>
<div class="smallblock">
<div class="small">3</div>
<div class="small">4</div>
</div>
<div class="smallblock">
<div class="small">5</div>
<div class="small">6</div>
</div>
<div class="large">7</div>
</body>
</html>
There is no generic pure CSS solution.
See a previous answer of mine for a comparison of the candidate techniques:
CSS Floating Divs At Variable Heights
Unless you can use server-side code to manually calculate pixels and use position: relative / position: absolute; top: ?px; left: ?px, you will have to resort to JavaScript to handle the positioning.
This jQuery plugin is generally a good solution: jQuery Masonry
There's also a raw JavaScript version: Vanilla Masonry
I find myself recommending it somewhat regularly:
https://stackoverflow.com/search?q=user%3A405015+masonry
Some possibly relevant demos:
http://desandro.com/demo/masonry/docs/filtering.html
http://desandro.com/demo/masonry/docs/animating-jquery.html
http://desandro.com/demo/masonry/docs/appending.html
I have a DIV section that would like to use it as a "component" in a variety of contexts. For "component", I mean it will be automatically included in some places of the HTML page that could not be foreseen.
The required behaviour of the DIV section is that it's width should be always 100%, meaning it should totally fill the parent. A problem appears because of the fact that the total width of DIV is sum of inner width + paddings + margins. My paddings for the DIV section are:
padding-left: 10px;
padding-right: 10px;
The question is: how am I supposed to set the width of the DIV section when I don't know the width of the parent, but want to be 100%? There isn't something like 100% - 2 * 10px...
Preferrably, I wouldn't use javascript or JQuery for this kind of layout problem.
Thanks in advance,
Zlatko
How about nesting the Divs?
<html>
<head>
<title>Div Test</title>
</head>
<body>
<div class='outerDiv' style=' background-color: red;margin: 0px; padding: 0px 10px;'>
<div class='innerDiv' style='width: 100%; background-color: yellow; margin: 0px; padding: 0px;'>
Whatever
</div>
</div>
</body>
</html>
Hope this helps.
Leave the width at auto. Unless you are doing something like floating it of fiddling with its display (which you shouldn't, given what you are trying to achieve) that will cause the width to use the remaining space.
That's what the box-sizing attribute is there for. See this guide.
You could either remove the padding from the component, which would solve your problem directly. However, I'm assuming you won't/can't do this for some reason. Therefore, if the component div will always be inside a parent div, how about setting the parent div's overflow to hidden. Simply add this to the parent element CSS:
.parent {overflow: hidden;}
Anything flowing over the parent should now be hidden.