I'm trying to create a scrollbar-less page using CSS3 box-flex. Here's what I have:
<html>
<body style="height:100%;display:-webkit-box;-webkit-box-orient:vertical;"> <!-- height is 1000px -->
<div style="height:100px;">test</div>
<div style="-webkit-box-flex:1.0;">
<div style="height:100%;">test</div> <!-- expected this to be 900px, but it's 1000px -->
</div>
</body>
</html>
How can I make the child div fill up the rest of the page without using Javascript? (in this case, it's 900px).
P.S. I have Javascript resizing for browsers without CSS3 support.
Edit:
P.P.S: The child div is actually an iframe in my code, and box-flex doesn't seem to work on iframes.
The height of the child div is determined by it's content: http://jsfiddle.net/yNQDK/
In this case One line of text
Related
I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.
How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?
<body>
<header>
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
As you only want to use CSS, you could just set padding-top on your #wrapper div so it moves the content below the bottom of the header. Then adjust the padding-top size for each screen size in media queries.
...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.
If you are able to change the HTML, then another approach that avoids the use of JavaScript is to include two copies of the header element:
<body>
<header id="show">
This fixed content will wrap on small devices.
</header>
<header id="flow">
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
Then you can use #show { position: fixed; zIndex: 10000 } for the first element (to keep the header visible), and #flow { display: hidden } on the second element to consume the space in the page flow.
I'm trying to use this technique
CSS 100% height layout
to fill page height 100%
Ultimately it fails because DOM has custom tags that won't honor height tag
Example:
Works
<div style="height:100%">
ok here
<div style="height:100%">
<!-- WORKS: takes full browser height -->
</div>
</div>
Broken
<div style="height:100%">
ok here
<my-tag style="height:100%">
<!-- BROKEN : takes minimal browser height -->
</my-tag>
</div>
I tried using
<polymer-element name="my-tag" extends="div">
but then page silently doesn't render anything.
By default, custom elements are display: inline. This means height:100% won't work unless you make the element block level:
:host {
display: block;
height: 100%;
}
The other issue is your declaration. When you use extends to extend another element, this is called a type extension custom element. Instead of declaring <my-tag>, it needs to be declared using is="":
<div is="my-tag"></div>
Demo: http://jsbin.com/bohumisa/1/edit
I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
I'm trying to use CSS to create callouts in a block of text (for things like block quotes or relevant pictures). It has to be manipulable with Javascript and work with CMSs, so I can't just embed the callout in the middle of the text block and float it. Instead, the callouts are located at the top of the text block and I use a pusher div of a certain height to move it down to the desired location.
This technique works perfectly when all of the callouts are on the same side of the text block. The problem is when I want a callout on each side. The first pusher div pushes the second pusher div down, even though they are floated to different sides and both have a very small set width.
Here is an example of the problem. The pusher divs (normally 0px thick and transparent) are the red bars on the side. Both of them should start at the top of the block, just under the header. As you can see (at least if you're using Webkite/Gecko, I haven't tried anything else), the bar on the right starts underneath the bar on the left.
http://keaton.ws/Files/theCalloutProblem.html
I've tried playing around with the structure of the HTML (Taking the pusher and callout out of their parent div) and changing the display property of almost everything, and nothing has worked. Most of the changes I make result in the text not wrapping properly. I know this is a rather obscure problem, but any help would be greatly appreciated.
-Keaton
Here's the code, with styles inline:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:750px; margin:0 auto;">
<div style="width:750px;text-align:center;"><h1>This is the header</h1></div>
<!-- Left Callout -->
<div>
<div style="width:0px;float:left;height:100px;"></div>
<div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div>
</div>
<!-- Right Callout -->
<div>
<div style="width:0px;float:right;height:250px;"></div>
<div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div>
</div>
<div style="width:700px; margin: 0 auto;">
<!-- Body Text -->
</div>
</div>
</body>
</html>
In these examples, the alternating left/right floats always have the same height.
http://meyerweb.com/eric/css/edge/slantastic/holiday.html
http://meyerweb.com/eric/css/edge/slantastic/demo2.html (<--why is this link unclickable?)
http://csstextwrap.com/#export
It seems that you have to sort the floats by height/position to achieve the desired effect:
http://jsfiddle.net/ge5YG/2/
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}