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/
Related
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;
}
What I am trying to do is the following.
I have a list of hidden images.
I have a button activated with Jquery onclick that replaces the html of a div to include the images
The button functions as a cycle button and gets a big list of images.
My problem is that the images do not scale to the size of the parent div. Even if I give them a .horizontal and .vertical class
Any ideas?
I want to keep the format of the hidden list of images inside a div because i do some other things with the lists. I originally thought that by having two classes for the images it will work and now that I am finishing I realised that the whole idea has a problem !
http://jsfiddle.net/alexnode/ttQHt/
HTML
<div id="artdiv2">
<div id="artslide1nextbutton">></div>
<div id="artslide1"></div>
</div>
<div class="hidden">
<div id="1slide1">
<img class="horizontal" src="http://farm8.staticflickr.com/7366/9160515864_7dc851a598.jpg" alt="Rezando a los antiguos Dioses - Praying to the old Gods">
</div>
<div id="1slide2">
<img class="vertical" src="http://farm6.staticflickr.com/5519/9158661396_4828a06655.jpg" alt="Drain">
</div>
</div>
Jquery
//i get everything called 1slide like that.
var artslides = $('[id^=1slide]');
idxs1 = 1;
//this is my button that cycles through the image
$("#artslide1nextbutton").on(
"click", function () {
$("#artslide1").html(artslides.eq(idxs1).html());
idxs1 = idxs1 == 1? 0 : idxs1 + 1;
});
CSS
.hidden{display:none;}
#artdiv2{ position:absolute; top:8%; left: 20%; height:70%; width:100%; background:DimGray;}
#artslide1nextbutton{position:fixed; top:0px; left: 0px; height:auto; width:10%; background:DarkRed;pointer:cursor;}
.horizontal {position:relative; width:100%; height:auto;}
.vertical {position:relative; height:100%; width:auto;}
EDIT : answer updated to fit closer to question.:
you could play width min and max value and center img with text-align:center.
demo
http://jsfiddle.net/ttQHt/2/
#artslide1 {
width:100%;
overflow:hidden;
height:100%;
text-align:center;
}
#artslide1 img {
min-height:100%;
max-width:100%;
}
Some other option to play with image
here is an idea of what happens if you can set line-height. http://codepen.io/gcyrillus/pen/BdtEj and adding min-width/min-height http://codepen.io/anon/pen/kfIbp
Use the JQuery variable .height() and .width()
I'm on mobile, so I can't try this myself, but what about putting a width and height attribute directly on the image elements, and using the button to just change the image source? That would make every image have the same width and height.
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
I've seen versions of this simple problem raised a dozen times here and elsewhere on the web, but I haven't seen a solution that works for me yet so I'm asking it again.
I want a webpage with a variable height full width header (height based on contents). Below that I want a content area that fills the rest of the browser viewport. If the content is larger than the remaining space in the viewport then I want the content area to scroll.
I don't need this to work on IE6. I don't care whether the solution uses CSS, tables or a mixture of the two, just no frames and no Javascript.
For a bonus point fix a variable height footer to the bottom of the page.
This cannot be done with CSS/ tables alone unless you know how big your two containers will be ahead of time.
If you are willing to use a little bit of javascript this will works perfectly.
<style>
body, html
{
padding:0;
margin:0;
height:100%;
width:100%;
}
section, header
{
width:100%;
display:block;
}
section
{
background:red;
}
</style>
<script>
window.onload = window.onresize = function ()
{
document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px";
}
</script>
<header id="head">
header
<br />
two
</header>
<section id="section">
scroll the rest
</section>
I need to stretch main div height to the view-port height and place the footer at the bottom of the screen. could anybody solve this?
body{text-align:center;}
#main{width:200px;margin:0px auto;background:#cccccc;}
#header{height:20px;background:#00FFFF;}
#content{height:80px;background:#cccccc;}
#footer{background:#0000FF;height:20px;}
.demo{width:90%;margin:0px auto;}
<div id="main">MAIN
<div id="header" class="demo">HEADER</div>
<div id="content" class="demo">CONTENT</div>
<div id="footer" class="demo">FOOTER</div>
</div>
This way of doing it works pretty well: http://www.xs4all.nl/~peterned/examples/csslayout1.html
You could try 'position:fixed; bottom: 0px' on the footer div.
That will work fine, but could be a problem if the content-height gets bigger than the screen size.. if the box main can be at 100% screen size then i would try something like this:
#main{
position:relative;
min-height:100%;
height:100%;
height:auto !important;
}
#footer{
position:absolute;
bottom:0px;
}
All the heigth values are just to make the content at least fit the screen size, but it may expand if the content becomes bigger.
Gushiken
I've churned on trying to do this strictly with CSS on several occasions (with cross-browser compliance in mind). I find it easier just to write a quick jQuery script which handles resizing the div to the appropriate size.
$(document).ready(function () {
/* this could be something different, like subtracting the height of your footer or something */
$(window).resize(function () { resizeMyDiv(); });
});
function resizeMyDiv() {
$("#divResize").height($(window).height());
}
Not sure if you're using jQuery, but it seems to be easier to do it this way.