| How to make CSS height: 100% take effect in a varying height container? |
if you tell the tag's parent tags (including html and body tags) to also be
100% height that should fix your issue. I added max-height as an option, I
did not know if you wanted the container to run the length of the whole
screen.
http://jsfiddle.net/brandonbabb/SL3FC/
html, body {
height:100%
}
.outer {
border: 1px solid black;
height: 100%;
max-height: 500px
}
.col-left {
float: left;
background: cyan;
width: 80%;
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
|
| What do I have to do to get a Border Layout to have the West container full height of the viewport? |
You can also use the weight property to give precedence to a
region—for example, giving precedence to the West region over the
North region. All these changes mean that you should not often need
nesting with border layout, speeding up rendering of components that
use that layout.
Ext.define('MyApp.view.MainViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'west',
weight: -1,
width: 150,
title: 'My Panel'
},
{
xtype: 'panel',
|
| calculate and set the height for some div (initial settings). When the height of the browser window is changed --> change the height for div |
is that what you are looking for?
api.jquery.com
jQuery(document).ready(function () {
$(window).resize(function() {
var height = document.documentElement.clientHeight - 500;
if (height < 135) {
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
jQuery(window).resize(function () {
var height = document.documentElement.clientHeight - 500;
if (height < 135)
{
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
});
});
});
|
| jQuery - get tallest image's height, apply other images' height difference to top margin |
Try this:
function createGrid() {
var imgs = $('.hlist figure > img');
var maxImgHeight = 0;
imgs.each(function () {
var imgHeight = $(this).outerHeight();
maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight :
imgHeight;
});
imgs.each(function () {
var margin = maxImgHeight > $(this).outerHeight() ?
(maxImgHeight - $(this).outerHeight()) : 0;
$(this).css("margin-top", (margin + "px"));
});
}
The first each loop looks for the tallest height and stores it in
maxImgHeight, as you originally had planned. The second each loop
calculates and applies the margin for each image. The conditional
assignment will cause the margin-top for the tallest image to be 0.
|
| How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript? |
The correct way of ending <div> tag is by using </div>.
Try this code-
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 200px;
height: 100%;">
<div style="float: left; height: 50px; width: 200px;
background-color: green; position: fixed;"></div>
<div style="float: left; height: 100%; width: 200px;
background-color: red;"></div>
<div style="float: left; bottom: 0px; left:0px; position: fixed;
height: 50px; width: 200px; background-color: blue;"></div>
</div>
</body>
|
| Create three divs such that the top and bottom ones have fixed height, and the middle one has dynamic height? |
If i understand you request you need to use wrap div:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
|
| TD cell with css decimal percent height gets incorrect actual height in Chrome |
This might be a bug in Webkit based Browsers. But you unnecessarily confuse
the table algorithm ...! Why would or should you set the height of each TD
explicitly when the table algorithm will do it by itself? So the easiest
way to avoid the problem is to simply set no height for the TDs.
See the updated jsFiddle: http://jsfiddle.net/RUwLH/4/
...
From a semantically point of view your code is highly questionable, and
giving each of the elements the same class is also very inefficient CSS
(hope you just did it for the Fiddle).
After all these years tables are still a "special problem" ...! So only use
them for tabular data and nothing else!
HTML and CSS provide a lot of other possibilities which are even more
semantically!
|
| whats wrong with this code? im trying to change the height of each section to the height of window |
Seems like a strange way to do that ?
$(window).on('resize load', function() {
$('#home, #about, #skills').height( $(this).height() );
});
You have to update the variables when the window changes size, i.e. inside
the resize function
EDIT:
You'll also need a DOM ready handler, and window.onload isn't always
triggered when doing it that way, so just do the same thing on DOM ready,
like so :
$(function() {
$('#home, #about, #skills').height( $(window).height() );
$(window).on('resize', function() {
$('#home, #about, #skills').height( $(this).height() );
});
});
FIDDLE
|
| issue with setting min-height for a div before website load based on device height |
in order to use a percentage height, the parent must have a set height
(either in pixels or %):
body,html{
height: 100%;
}
.container-fluid{
background:#000000;
width:100px;
min-height:50%;
}
Fiddle
|
| Display 3-column layout with variable-height content in fixed height box? |
Using just CSS, columns appear to be the best way.
demo
HTML
Each tweet is just a pair of <strong> usernames, and <p> tweet
bodies. Change these to whatever you like, but make sure to change the CSS
to match.
<div class="threecol">
<strong>@someone</strong>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae.</p>
<strong>@nextuser</strong>
<p>...</p>
</div>
CSS
This CSS is for the container. Other than your specificiations (width,
height, hidden overflow) it just adds the column settings.
.threecol {
height: 200px;
width: 600px;
margin: auto;
overflow: hidden;
-webkit-column-count: 3;
-moz-column-count: 3;
col
|
| Responsively changing an elements height to the view port height in pixels |
My solution uses a combination of simple jQuery and some basic css
declarations, the jQuery is cross browser as far as I can tell however I
have noticed the CSS does not play well with IE<9. If anyone has any
other solutions/more efficient ideas let me know!
(yes I realize this is not incredibly memory efficient as it runs a loop,
but so far my tests have not deemed it noticeable)
The CSS can be seen in the jsbin example, it is pretty simple. Keep in mind
this solution should only be used if percentages will not work for your
height.
function ChangeElementHeight(element){
var Element = $(element);//this is the elements whos height needs
changes
var ElementHeight = Element.css('height');//the current height of the
element
var ViewportHeight = $(window).height()+"px";//le w
|
| One div fixed height and another div remaining vertical space to make it 100% of window height |
Do you want to this apply this css it matching your requirement
body, html {
min-height: 100%;
}
#container {
margin: 0 auto;
height: 400px;
width: 400px;
padding: 0px;
border:1px solid #ccc;
}
#div-a {
height: 16%;
width: 96%;
float: left;
margin: 2%;
background: #ddd888;
}
#div-b {
float: left;
min-height: 78%;
width: 46%;
margin: 0% 2% 2% 2%;
background: #bbb;
}
#div-c {
float: left;
min-height: 78%;
width: 48%;
margin: 0% 2% 2% 0%;
background: #000;
}
and html its help full for you
<div id="container">
<div id="div-a"></div>
<div id="div-b"></div>
<div id="div-c"></div>
</div>
|
| Why doesn't $(window).height() and $(document).height() equivalency work well in Firefox? |
$(window).height(); will return the height of the visible window.
$(document).height(); will return the height of the entire document, not
just the visible part.
Working Example
That said, I don't think your specific issue is with the if statement...
I tested it and it seems to work equally well in Firefox, Chrome, and IE9.
Working Example 2
$(window).scroll(function () {
if ($(window).scrollTop() +1 >= $(document).height() -
$(window).height()) {
$('body').css('background','red');
}else{
$('body').css('background','none');
}
});
|
| css floating element increase parent height but sibling with 100% height not working |
Jquery solution, here's a Fiddle
$(function() {
var fHgt = $('#float').outerHeight();
$('#fill').css({ height: fHgt });
});
and here's a CSS solution
#container {
display: table;
width: 500px;
background-color: yellow;
}
#float {
display: table-cell;
width: 20%;
background-color: green;
}
#fill {
display: table-cell;
width: 80%;
overflow: hidden;
background-color: red;
}
|
| HTML table with 100% of height, and the rows equally divided in height. How to make it possible? |
You can position the table absolute. For example, give it the class
"full-height", and then add the following css:
table.full-height {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
This will expand the table to the full height!
|
| Center div in parent with only min-height, and child may without height & with relative position |
Use the display: table; and display: table-cell; properties.
The outer DIV will need to have display: table; and the inner DIV display:
table-cell; along with vertical-align: middle;. Now you will be mimicing
the default display of a td.
CSS
.parent {
min-height: 100%;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
HTML
<div class="parent">
<div class="child">child</div>
</div>
This question has been asked often. A simple search here on SO or Google
will get you plenting of results.
Vertically Aligning Divs
Align vertically using CSS 3
|
| Find a table row height and apply padding to a div based on row's height |
Current problems:
You have multiple elements using the same ID's. ID's should always be
unique.
getElementById('#tr3') is invalid.
getElementById('.main') is also invalid.
You can't set marginTop on an element which is displayed as a table-cell.
You're not actually ever calling your function (and judging by comments you
want it on page load)
Solutions (ordered as above):
Change all duplicate ID's in your mark-up to be unique.
This should be getElementById('tr3').
Replace the class main with an ID main and use getElementById('main').
I don't really understand what you're trying to achieve with this part (at
the moment anyway)...
There's no need for the seperate function if you want it on load, just use
window.onload = function()..
This will solve your load and padding issues (
|
| Allow GridView cell's height to expand but maintain same height for all cells |
Personally, when i want to keep the same height for Gridview items, i set
Maxlines to 1 for Child TextView and i set a fixed height for child
Container.
in your exemple :
add android:maxLines="1" to tvCaption
add android:minHeight="X dip" and android:layout_height="X dip" to GridItem
Replace X with a sufficient value.
|
| How to return original height to dynamic-height content with Javascript? |
Could be done using data():
http://jsfiddle.net/sWf9J/2/
function toggleModule(module){
var selectModule = $('div.module[data-module=' + module + ']');
if(!selectModule.data('originalHeight'))
selectModule.data('originalHeight',selectModule.height());
if(selectModule.hasClass('open')){
selectModule.animate({'height':'40px'},200);
selectModule.removeClass('open').addClass('closed');
} else if(selectModule.hasClass('closed')){
selectModule.animate({'height':selectModule.data('originalHeight')},200);
selectModule.removeClass('closed').addClass('open');
}
}
|
| force div height to nearest multiple of the background image height |
Here's asolution to your problem. It will expand the content container to
the next height that is a multiple of 300.
Plain JavaScript version
var e = document.getElementById('content');
var height = e.clientHeight;
var newHeight = 300 * Math.ceil(height / 300);
e.setAttribute('style', 'height: ' + newHeight + 'px;');
Demo
Try before buy
jQuery version
var e = $('#content');
e.css('height', 300 * Math.ceil(e.height() / 300));
Demo
Try before buy
|
| Can I grab the height of an unrelated element that has a dynamic height with Sass? |
Sorry, but I think is not possible to get a element height with SASS (i'm
not an expert in sass, but I couldn't find any option).
I recommend you to do this with JavaScript:
http://jsfiddle.net/9DcYn/2/
window.onload = fixHeight();
function fixHeight() {
var divh = document.getElementById('leftdiv').offsetHeight;
var divhnum = new Number(divh);
var setheight = (divhnum - 325);
document.getElementById('rightdiv').style.height = setheight + 'px';
}
Hope this will help you!
|
| line-height vs cursor height issue in Textarea in chrome |
I have tried this code in Chrome and it was successful. Now you implement
and check your code.
<TEXTAREA style="font-family: Arial, Helvetica, sans-serif;
font-size:13px; line-height: 10px; height: 150px;"></TEXTAREA>
|
| Stretch child div height to fill parent that has dynamic height |
The solution is to use display: table-cell to bring those elements inline
instead of using display: inline-block or float: left.
div#container {
padding:20px;
background:#F1F1F1
}
.content {
width:150px;
background:#ddd;
padding:10px;
display:table-cell;
vertical-align:top;
}
.text {
font-family: 12px Tahoma, Geneva, sans-serif;
color:#555;
}
Working Fiddle
|
| Block with 100% height on both viewport and page |
The most common way is to do this:
html, body { height:100%; }
Then set any elements which are to also fill the vertical space to
height:100%.
Note: For this to work the item needs to be block-level and have content,
even a &nsbp; would do and don't forget that padding adds to the height of
the element so be sure to compensate accordingly if you absolutely have to
have padding on that element.
|
| Make an element at least the height of the viewport |
Try
$(document).ready(function () {
//make sections at least as tall as the viewport
var $sections = $('section').each(function(){
var $this = $(this);
$this.data('oheight', $this.height())
});
$(window).resize(function(){
var winheight = $(window).height();
$('section').each(function(){
var $this = $(this), oheight = $this.data('oheight') ||
$this.height();
$this.css('height', oheight <= winheight ? winheight :
oheight);
//remove this
$this.find('.height').text(oheight <= winheight ? winheight
: oheight)
})
}).resize()
});
Demo: Fiddle
|
| How to define layout element height as screen height |
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:layout_width="fill_parent"
|
| Android - Bitmap Height = Textview Text Height? |
Try using
ImageSpan(resizedbitmap, ImageSpan.ALIGN_BASELINE)
instead of
ImageSpan(resizedbitmap)
The default alignment of an ImageSpan is ALIGN_BOTTOM.
|
| children height 100% without setting parent fixed height |
You can do this by using absolutely positioning the #buttons div within the
parent.
For this, first declare relative positioning on the parent
#container {
position:relative;
min-height:200px;/* if you can reliably set a minimum height */
}
#buttons {
position:absolute;
height:100%;
width:150px;
}
#content {
margin-left:150px;
}
Because the absolutely positioned button elements are now out of the page
flow, you can add a margin equal to the width of the #buttons div to the
#content div so that it still is in the right place.
See the updated fiddle:
http://jsfiddle.net/kVcds/3/
|
| Javascript / jQuery - Is there a performance difference between height() and .css({'height'}) |
Read the Source, Luke.
jQuery.prototype.height:
//snipped to end:
return value === undefined ?
// Get width or height on the element, requesting but not forcing
parseFloat
jQuery.css( elem, type, extra ) :
// Set width or height on the element
jQuery.style( elem, type, value, extra );
jQuery.prototype.css:
return value !== undefined ?
jQuery.style( elem, name, value ) :
jQuery.css( elem, name );
The difference between the two is what's done before going over the matched
elements, and that extra parameter that's passed in .height. What could
rationally cause a big slowdown? I've no real idea. Maybe it has to do with
optimizations a js engine can do in one, but not the other. More likely
than not, the perf test is bad (testing these things correctly is very ha
|
| jQuery Error: Object has no method 'height', this.height() |
this is a DOM element. You want a jQuery object.
Try $(this).height() :
function Test(){
$("#list li").each(function(){
var h = $(this).height() + 50;
$(this).height(h);
});
}
|
| Find out the height of an element would have to animate max-height properly |
My current Workaround:
The #stuff element contains two nested divs:
<div id="stuff">
<div id="a">Lorem Ipsum</div>
<div id="b">Lorem Ipsum</div>
</div>
I am now using $('#a').outerWidth() + $('#b').outerWidth() to calculate the
height I need. (cHeight in Ross' answer)
Better approach:
An option might be to
duplicate the full #stuff div
make it display none
remove the max-height property (max-height: auto)
then use `cHeight = $('#stuff-duplicate').height()'
|
| How to make right side bar height go along with the height of the main content |
your container seems to be fine and has a auto height so what is the
problem
here you see the fiddle
http://jsfiddle.net/cancerian73/ZpZCD/
.container {background-color:#fc0;}
|
| Fill remaining height in such a way as height: 100% works inside |
You can use techniques such as defining top, left, bottom and right at the
same time.
jsFiddle Demo
Main CSS:
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: yellow;
}
.content {
position: absolute;
bottom: 0;
left: 0;
top: 45px;
right: 0;
background: red;
}
|
| Fill remaining height in fixed-height css table |
Why does it need to be a table? Can't you just let the container hide the
overflow?
html
<div class="container">
<div class="top">
Top, green area
</div>
<div class="bottom">
Bottom, blue area
</div>
</div>
css
.container {
width: 250px;
height: 162px;
overflow: hidden;
background: lightblue;
}
.top {
background: lightgreen;
}
http://jsfiddle.net/sXHry/1/ and http://jsfiddle.net/sXHry/2/ (less
content)
I suspect i might be missing something, looking forward to being
enlightened ;)
|
| how to make the min-height of body equal to screen.height |
Alright, since that didn't work... You have an html element style found in
your div id "center_wrapper" it is contained within div id "title". Change
the element style of min-height to 450 as shown below:
<fieldset id="center_wrapper" style="min-height: 450px;">
That should do the trick...
|
| jQuery Set height of 2 independent lists first list li the same height as second li |
http://jsfiddle.net/EvspT/
$(document).ready(function() {
$('.extraQuestionName li').each(function(i) {
$('.extraQuestionValue li').eq(i).height($(this).height());
});
});
The each() function has an index parameter. This loops through the li
elements in the first list, and uses eq() to find the item with the same
index in the second list, then set the height.
|
| WooThemes - Flexslider: Height of flex-viewport |
Basically flexslider doesn't have a feature for fixed height according to
its document. But I found some code to solve this problem here in the
official repository by calculating the tallest height to supply the height
of slide.
$(document).ready(function() {
fixFlexsliderHeight();
});
$(window).load(function() {
fixFlexsliderHeight();
});
$(window).resize(function() {
fixFlexsliderHeight();
});
function fixFlexsliderHeight() {
// Set fixed height based on the tallest slide
$('.flexslider').each(function(){
var sliderHeight = 0;
$(this).find('.slides > li').each(function(){
slideHeight = $(this).height();
if (sliderHeight < slideHeight) {
sliderHeight = slideHeight;
}
});
$(thi
|
| Content Height Based On Browser Viewport |
$(document).ready(pageSizer());
$(window).resize(pageSizer());
change to
$(document).ready(pageSizer);
$(window).resize(pageSizer);
You are invoking your functions instead of passing them as a reference
which jQuery expects.
|
| How to set fixed height to Viewport and enable browser scroll in GXT 2.x? |
On solution would be to extend FitLayout to avoid to recompute the height
on resize :
public class MyFitLayout extends FitLayout {
protected void setItemSize(Component item, Size size) {
if (item != null && item.isRendered()) {
size.width -= getSideMargins(item);
//size.height -= item.el().getMargins("tb");
setSize(item, size.width, size.height);
}
}
}
|
| Full viewport height image with parallax scrolling |
Don't forget to call refresh() at the end of imageFit.
If you include https://gist.github.com/Prinzhorn/5796546 as well, it would
be as simple as
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight).refresh();
};
|
