In this example, http://jsfiddle.net/mnXH9/, the height of the content-display element and the height of the nav-menu-container are fixed.
How do I make the height of the content-display and nav-menu-container elements extend to the remaining height of the browser window as the browser height is being adjusted by a user provided the height in the browser window is greater than 400px (The height of the header plus the nav-menu-container)?
I would like for the scrollbar to be inside the nav-menu-content element if the total height in the browser is greater than the sum of the height of the header (100px) and the nav-menu-container element (300px).
If the browser window's height is less than 400px then a scrollbar would appear in the browser window to allow scrolling throughout the 100px header and the 300px min-height of the below elements.
EDIT
Attached are photoshopped mockups of what the jsfiddle should look like.
tab 1 when the browser height is less than 400px
tab 1 when the browser height is greater than 400px
tab 2 when the browser height is less than 400px
tab 2 when the browser height is greater than 400px
EDIT
tab 2 of http://jsfiddle.net/mnXH9/25/show/
EDIT--switched fiddle versions to one working better based off comments and noted IE8.
View a full screen version here (view css here). This uses #media queries and some other CSS3, so it will not work on older browsers, but I believe it does exactly what you requested. I reset the two columns to be position: absolute to achieve this. Some javascript to check for height could be used to fix older browsers if necessary.
IE8 (if you care) needs to also have the overflow: auto set on the #tabs (I removed it from that to the .panel inside for better effects on other browsers).
You could use faux columns to accomplish equivalent height on tab container and right nav - would be simpler than mocking around with manual height settings. That would also make them appear to extend to the entire browser height.
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {margin:auto; height:100%; width: 500px;}
#header {top:0px;background-color: pink; height:100px; border-bottom: none; z-index:50}
#content-display {position:relative; width: 300px; height:100%; float: left; z-index:-1;}
#nav-menu-container {position:relative; bottom:43px;padding-top:50px;left:300px; width:200px; height:100%; background:lightblue; z-index:-1;}
#nav-menu-content { width: 100px; margin-left:50px; margin-top:43px;height:300px; background:greenyellow;}
#tabs ul li a {font-family: Arial,Helvetica,Verdana,sans-serif; font-size: 13px;} /*Tab title text*/
#tabs {height:100%;}
.panel{height:218px; overflow: auto;}
</style>
Related
I have a page with a lot of layers for the background (five layers) which should cover the entire page content (100% height and div).
Each layer has these properties:
position:relative;
width: 100%;
height:100%;
min-height: 100%;
These properties are OK if the page content is short: the divs have an height of 100% of the window, so it's ok.
The problem is when the page is longer (look the following example). The layers have a 100% height of the browser window, not the actual content height.
That's because (I suppose) of the height:100% property. Removing it, it's fine for long pages, but not for shorter ones.
JSFiddle: http://jsfiddle.net/cfMHm/
How can I fix this?
In the tag where your content is being displayed, you could add the CSS property overflow
http://www.w3schools.com/cssref/pr_pos_overflow.asp
You can use it to trim the excess content, or add a scrollbar.
EX.
.class {
overflow:auto;
}
what about scrolling the longer content
#actual_page {
width: 990px;
margin: 0px auto;
height:100%;
overflow:scroll;
background-color: pink;
}
fiddle here http://jsfiddle.net/Jammycoder/cfMHm/1/
Instead of
height:100%
You can try:
min-height: 50% (or whatever you need it to be).
See the cyan here:
http://jsfiddle.net/cfMHm/2/
Remove the height:100% from your layers CSS.
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).
I have a div with lots of content in it, and trying to set a width to be 100% of the parent element. This div also uses a padding, so I thought I should be setting the width to auto.
But for some reason it always expands past the parent width. I even have overflow set to scroll.
What I want is the div to have a scroll bar (only horizontal), and its width to fit the parent width.
Does anyone know how I can fix this?
100% width of its parent, with padding:
Given that the padding you mention is applied to the 100% wide element, the problem is within the box model that browsers use. If you apply 100% width and some padding, the element will get width + padding as its complete width, thus causing it to become too large. There are a few ways to solve this:
CSS3 introduces a new property called box-sizing, by setting it to border-box, the padding will be added within the given width of the element, instead of adding to the width causing the element to become "to big". (Notice the lack of support by older browsers).
I believe it would be possible to use left: 0; right: 0; instead of using width: 100%;. In that case you can add padding, without the element becoming to wide.
The second option in practice:
<!-- The markup -->
<div class="parent">
<div class="child">Child</div>
</div>
/* The CSS */
.parent {
width: 200px;
height: 200px;
position: relative;
background-color: #666;
}
.child {
position: absolute;
left: 0;
right: 0;
padding: 10px;
background-color: #888;
}
Here is a working example of the second option: http://jsfiddle.net/mGLRD/
Horizontal scroll-bar:
To get a horizontal scroll-bar, you will have to look in to the overflow-x CSS-property. By setting it to scroll, you will see a disabled scrollbar when there is no content to scroll, so the scrollbar is always visible. Your other option is to set it to auto, where the scrollbar will become visible if needed (may vary between different browsers).
Try:
div#content {
width:auto;
padding:20px;
overflow-x:auto;
}
See my demo: http://jsfiddle.net/HRRsU/3/
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Let's say I have a CSS DIV that holds formatted syntax code. The DIV is set to a min-width:100; and a max-width:100;
This same DIV has another CSS declaration for when the DIV is Hovered, max-width: 135% !important; and min-width: 135%;
So if the DIV holding the formated code is wider then the DIV's width, it shows a scroll bar and when you hover over the DIV it expands the DIV to the width of the code not to exceed 135%, if the DIV's code does not exceed the width of the DIV then the DIV stays the same width.
My problem, is that when a div exceeds the 100% width, it expands to the width of the code inside but stays LESS then 135%, is there a way to make it expand to 135% even if the code is not 135% but is over 100%?
Hopefully this makes sense
I almost need some kind of conditional statement that says...
If DIV contents are > 100% then make DIV 135% on Hover otherwise leave DIV at 100%
Is this even possible?
Here is my full CSS
.syntax {
min-width: 100%;
max-width: 100%;
margin: 1em 0 1em 0;
position: relative;
overflow-y: hidden;
overflow-x: auto;
font-size: .9em;
display:inline-block;
}
.syntax:hover {
max-width: 135% !important;
min-width: 135%;
}
I'm not sure I'm getting waht you mean, but if I'm not mistaken, all you're leaving aside is this:
min-width: 135% !important;
you may need to adjust overflow depending on what you need
A better option would be to use fixed sizes, but if you're working on adaptive layout environments guess that is a no go
I have a mobile app. I want to make my css work with all mobile phones. To do this I just use percentages for all my css calls:
.Wrapper
{
margin: auto;
text-align: center;
width: 60%;
}
The problem is that I cannot get the web page height to match for all pages. By this I mean that Android screens for example are huge (with a lot of white space on the bottom) but other phones are not.(Imagine that the image below is a android. That is how my app will look on it)
I have tried this to get the heights to all be the same:
body
{
text-align: center;
font-family: Helvetica, Arial, sans-serif;
color: Black;
background: #39bcd4 none;
height: 100%;
width: 100%;
}
The width works but the height does not. How can I get the height to work the same way? If the height is off, then all my percentages are going to be off too (attempting to adjust for each mobile browser)
From Sitepoint's CSS Reference:
Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups.
Setting your body to position:absolute; should work, if it doesn't try adding top:0; and bottom:0; along with your absolute positioning.
If you want the width and height of your site to be 100% of your WebView’s width and height then you need to set the viewport meta tag:
<meta name="viewport" content="width=device-width,height=device-height initial-scale=1">
A great description of this, along with a number of other tips for hybrid apps, can be found on the Chrome developer site.
Do you mean that you want the content to space out to fill the height? Not sure if that can be done, but one design solution to all the whitespace might be to have a vertical gradient background that's darker on the bottom, to make the content look a little less lonely.
Use the viewport height unit in the css like this:
.element { max-height: 100vh; }
or
.element { min-height: 100vh; }
or even
.element { min-height: calc(100vh - 60px); }
if you need to adjust the height of a element, which is not full height.