Set body to height of containing fixed element? - css

I have a body with a wrapper
<body>
<div class="wrapper">//loads of content</div>
</body>
The wrapper is set to position: fixed; Because of special scroll-behaviour and javascript. I would like the body to have the same height as the wrapper.
(If anyone is intersted in why I try to achive this I try to explain my problem here:
Setting height of fixed element
But I felt the question got overly complicated for anyone who wants to solve this issue.)

First thing, you can set .wrapper's height that is of body through CSS like this:
height: inherit;
Here inherit will take out its parent's height and then set it as its.
Second thing, you need javascript for that because if you will use CSS then I am afraid you will not be able to control the size of the body when resizing.
With CSS:
height: whatever_body_height
With JS:
function getDocHeight() { /*For cross-browser*/
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
window.onresize = function () {
document.getElementByClassName('.wrapper').style.height = getDocHeight();
}
Hope it helped.

Related

How to show the scaled image and text in the view port without scrollbar?

I have the following html:
<div class="wrapper">
<img class="img" src="img.png">
<div clas="text">
This is sample text.<br/>
This is sample text.
</div>
</div>
I also have the following css:
.wrapper {
width: 1200px;
margin: 0 auto;
}
The image can be very big (4000px in width and 3000px in height). I cannot set the height of the div.wrapper. I cannot assume the amount of the text either. How can I use CSS to display the fully scaled-down image plus text in the viewport without the vertical scroll bar?
This is the example in jsfidille https://jsfiddle.net/c2q1w1tq/2/
In case you are ok with a solution that also involve javascript you can use this:
function updateImageHeight() {
textHeight = $('.wrapper').height() - $('.wrapper img.img').height()
imgMaxHeight = $('.container').height() - textHeight
$('.wrapper img.img').height(imgMaxHeight)
}
$(function() {
updateImageHeight();
});
$(window).on('resize', function() {
updateImageHeight();
})
I used jquery here
The $(window).on('resize' will also give you a solution for window-resizing.
Here is a working jsfiddle:
https://jsfiddle.net/Ly8sac3v/
(I removed margin/padding for the html/body elements and wrapped everything in a container. In case you can't do that you can use the above code with the body element, however you might need some changes there).

Fixed header position in bootstrap 3 modal

I want to use a fixed header in my Bootstrap modal, however if I set .modal-header as position:fixed it scrolls along with the moda content. How do I create a trully fixed header in BS modal?
Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible.
You can easily do this using the CSS3 vh unit together with calc. Both vh as calc have pretty good browser support (IE9+).
The vh unit is relative to the viewport (= browser window) height. 1 vh is 1% of the height and 100vh means 100% of the viewport height.
We just need to substract the height of the modal's header, footer and margins. It's going to be difficult it that dynamic. If those sizes are fixed, we just add all the heights.
Set either the height or max-height to calc(100vh - header+footer px).
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
See the jsfiddle
Here's a simple trick.
Let me assume that i have to fix the div with class "fixedHeader"
Simple Jquery Way:
$('.modal').scroll(function() {
var a=$('.modal').scrollTop();
$('.fixedHeader').css('top',a+'px');
});
CSS
.fixedHeader {
position:fixed;
}
Whatever i have answered above is for normal bootstrap using jquery.But if someone is using angular bootstrap for the modal then
Angular
$timeout(function() {
angular.element('.modal').scroll(function() {
var a = angular.element('.modal').scrollTop();
angular.element('.fixedHeader').css('top', a + 'px');
});
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */
CSS
.fixedHeader {
position:fixed;
}
Make sure you have jquery dependency installed in both cases.
My solution may seem a little silly, but it details the steps I took to solve this problem for my use case.
I tried something like ritz078's answer, but what I found was that it did not work well on iOS when scrolling, since Safari likes to do things its own way.
So, my solution was to duplicate the bit of code I wanted to affix and place that duplicate code outside of the modal altogether in its own hidden wrapper:
<div class="fixed-header">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
</div>
Then I used JS to 1) make the duplicate code visible after I scroll through the modal a bit, 2) close the duplicate code whenever I click out of the modal, and 3) restore functionality to the duplicate modal's close button:
$('#myModal').on('scroll', function() {
var threshold = 60;
if ($('#myModal').scrollTop() > threshold) {
$('.fixed-header').addClass('affixed');
}
else {
$('.fixed-header').removeClass('affixed');
}
});
$('#myModal').on('hide.bs.modal', function (e) {
$('.fixed-header').removeClass('affixed');
});
$('.fixed-header button').click(function() {
$('#myModal').modal('hide');
});
The challenge here is matching the modal's styling (particularly its width and margins), but this solution lets you scroll the modal freely on iOS without looking funky, which was my goal.
JSFiddle (forked from Jasny's answer to show how it's different in scope from his answer)
As per my comment, this was actually an improvement in Bootstrap 3. Allowing long content and having the whole modal scroll, not just the 'content' of the modal.
You can override it with something like this, but it's not as nice functionality.
.modal {
overflow: hidden;
}
.modal-body {
height: 300px;
overflow: auto;
}
Demo
In javascript add a class to modal:
windowClass: 'framework-modal'
In css adjust o modal-body:
.framework-modal .modal-body {
max-height: 600px;
overflow: auto;
}
In Body content
CSS:
body{
overflow:hidden;
}

Stretch DIV to Bottom & Remove Scrollbar

I have a design where there is a header set at absolute position with a height of 379px. My content is also set at absolute position with top:232px as well. I am successfully getting the content div to stretch to the bottom of the page, however, because of the extra 232px even if the content does not pass the height of the window a vertical scroll bar is added.
I've looked around and have come across this topic posted which pretty much is the issue I'm having. Unfortunately, none of the solutions posted on that page have solved my problem. Here is my CSS code:
#wrapper { position:absolute; top:0; left:50%; width:1000px; height:100%; margin-left:-500px; }
#header { z-index:1; position:absolute; top:0px; background:url(../images/layout/backdrop.png) no-repeat; width:1000px; height:379px; }
#container {
position:relative;
top:232px;
bottom:0;
background-color:#d7d7d7;
width:739px;
height:100%;
min-height:100%;
margin-left:175px;
border:1px solid #000;
border-bottom:0;
border-top-right-radius:20px;
-moz-border-radius-topright:20px;
}
And the HTML Code:
<div id="wrapper">
<div id="header"></div>
<div id="container">
</div>
</div>
Seeing that nobody has been able to answer this, i'll post my solution to the problem.
Although I didn't exactly achieve it the way I wanted to which was to use strictly CSS, I still got it to stretch to the bottom using javascript with jQuery's library.
<script type="text/javascript">
//<![CDATA[
/*
Method calculates container height and stretches to bottom of page
if content does not fill entire space.
*/
function setHeight() {
// Get css values needed to compute height.
var topAttr = parseInt($('#container').css('top'), 10); // convert value to int...
var winHeight = $(window).height(); // get user's browser height...
var conHeight = $('#container').height(); // get container height...
// If the size of the container is less than the size of the user's window... resize.
if(conHeight < winHeight) {
var newHeight = (winHeight - topAttr) - 1; // calculate the new height....
$('#container').height(newHeight); // apply the height value to the container.
}
}
// Run as soon as page loads...
$(document).ready(function(){
setHeight();
});
// ]]>
I then, added a noscript block at the bottom of the text that appears in a red box asking the user to enable javascrpt...
<!-- DISPLAY IF USER HAS JAVA DISABLED -->
<noscript><div class="nojava">
It has been detected that you have disabled javascript from running. Please consider enabling javascript in that it will improve this website's functionality substantially.
</div></noscript>
<!-- DISPLAY IF USER HAS JAVA DISABLED -->
I'm sure there is someone out there that can
CSS Layout Help - Stretch div to bottom of page
http://jsfiddle.net/CZayc/

How do I force a DIV to extend down to the bottom of the screen?

This is probably not possible with CSS, but maybe I'm wrong:
I have a document structure like this:
BODY
DIV[A]
DIV[B]
DIV[A] is position:absolute with fixed with and centered on screen. It has no height setting.
DIV[B] is position:absolute with top:300px. This is the actual content DIV. Inside that, I position everything with position:absolute. Because I love position:absolute. It gives full control over positioning. No ugly text flow headaches... it's so nice.
Ok. But the problem now: DIV[B] is always only that height what I tell it to be. Now, maybe there's a cool CSS trick that would pull it always down to touch the bottom of the browser viewport?
To set the height to dynamically be the window height - DIV[A]'s height, you'll have to use JavaScript/jQuery and keep calling it with a SetTimeout.
Alternately, if it suits your needs, you can set DIV[B] to be position:fixed; bottom:0px;
<body onload="setupLayout();" >
...
<script language="javascript" type="text/javascript">
// ACTIVITIES TO RUN FOR THE PAGE
function setupLayout() {
setInterval('adjustLayout();', 1000);
}
// ADUST THE MAIN CONTAINER (content panel) LAYOUT
function adjustLayout() {
try {
var divB = $get('divB');
var divAHeight = 20px;
divB.style.height = document.body.clientHeight - divAHeight ;
}
catch (e) { }
}
</script>
</body>
#div_to_touch_the_bottom {
position:fixed;
bottom:0;
top:0;
left:25%;
right:25%;
}
This DIV will touch the bottom of viewport, you can modify its left and right according to your needs. I am not sure that this the answer you are lookign for but it could be a good start
When you want DIV to be a position:absolute, it should be in a position: relative container.
<div style="position: relative">
<div style="position: absolute; top: 300px">
<h3>Content Header</h3>
<!-- Content -->
</div>
</div>
So regarding your problem with DIV[B], you can mix between <table>s and <div>s.
I suppose DIV[A] is your header and DIV[B] your main content div and you would like to always have your content div take all the page when there is not a lot of text in it, right?
If I remember correctly, because I can't test it at the moment, you could:
html, body {
height: 100%;
}
DIV[B] {
height: 100%;
}
I think that should do the trick.
Edit: Here is a good example that might help you: http://www.xs4all.nl/~peterned/examples/csslayout1.html

CSS: height- fill out rest of div?

i wonder if this is possible with simple css or if i have to use javascript for this?
i have a sidebar on my website. a simple div#sidbar it's normally about 1024px high, but the height changes dynamically due to it's content.
so let's imaginge the following case:
<div id="sidebar">
<div class="widget"></div> //has a height of 100px
<div class="widget"></div> //has a height of 100px
<div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar
</div>
i want the div#rest to fill out the rest of the sidebar till it reaches the bottom of the div#sidebar.
is this possible with pure css?
If you know the exact height of #widget (100px in your case), you can avoid using JavaScript by using absolute positioning:
#sidebar
{
height: 100%;
width: ...;
position: relative;
}
.widget
{
height: 100px;
}
#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}
What you want is something like 100% - 200px but CSS doesn't support expressions such as these. IE has a non-standard "expressions" feature, but if you want your page to work on all browsers, I can't see a way to do this without JavaScript. Alternatively, you could make all the divs use percentage heights, so you could have something like 10%-10%-80%.
Update: Here's a simple solution using JavaScript. Whenever the content in your sidebar changes, just call this function:
function resize() {
// 200 is the total height of the other 2 divs
var height = document.getElementById('sidebar').offsetHeight - 200;
document.getElementById('rest').style.height = height + 'px';
};
I propose the table-element as an alternative:
+: clean CSS
+: avoiding javascript
-: table semantically misused
-: not the requested div-elements
I came across this question while looking for an answer to a similar question, and I thought I'd illustrate calc. As of this post, calc is not yet supported cross-browser; however, you can check this link here to see if your target browsers are supported. I've modified matt's hypothetical case to use calc in an example on jsFiddle. Essentially it is a pure CSS solution that does what casablanca proposes in his answer. For example, if a browser supports calc, then height: calc(100% - 200px); would be valid as well as for similar properties.
Sometimes a workaround might be:
#rest {
height: 100%;
padding-bottom: 200px;
}
The div itself will be too high, but because of the padding its content will have the right height.
you can do this with nested div tags. you have one specifying the width on the left, and then another left blank. To fill the rest of the other side you nest a 100% relative div inside the right side div. like so:
<div style="width:100%">
<div style="width:300px;background-color:#FFFF00;float:left">
</div>
<div style="margin-left:300px">
<div style="position:relative;left:0px;width:100%;background-color:#00FFFF">
</div>
</div>
</div>
Try
height: 100%;
or
height: auto;

Resources