Say, for example, I have two divs like so:
<body>
<div id="header">
MY CONTENTS
</div>
<div id="main">
MY OTHER CONTENTS
</div>
</body>
The first div has the attributes position:fixed; and width:100%; in CSS, the other div is just a div with much content inside.
Ok, there is a scrollbar in the right side, as usual. But this scrollbar affects all of the divs. I want the scrollbar to only affect the second div, is possible?
I tried everything with overflow:auto, overflow:hidden, and overflow:scroll but I didn't reach my goal...
EDIT: Here my jsfiddle: http://jsfiddle.net/upcfp/
Do you want to do something like that?
jsfiddle Example 1
I edited your jsfiddle and removed some of the not needed parts for your question:
edited version of your jsfiddle
seems like there was a
</div>
missing in the #header, but is that what you wanted to get?
Is this what you had in mind?
This is a simple method. I have the header at the top, absolutely positioned, at a height of 100 pixels. Below that, I have the main content area, which has a height of 100%, a transparent top border of 100 pixels (so the content appears below the absolutely positioned header).
The box-sizing property in CSS allows us to fit the entire element into the width and height we specify, including padding and borders. So including the top border, the height of the main content is 100%, and the scrollbar appears only on the main content div.
The trick here, by the way, is setting the height of both html and body to 100%. This wouldn't work otherwise.
CSS:
html,body {
height:100%;
}
#header {
position:absolute;
width: 100%;
height: 100px;
background:#c3c3c3;
z-index:1;
}
#main {
background: #eee;
height:100%;
border-top:100px solid transparent;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
Here is your fiddle using my solution.
Try:
#div2 {
overflow-y: scroll;
}
That will only put the scrollbars when needed. To always display them use overflow-y: scroll;. I had prefixed the second div's ID with div as you should not use only numbers for IDs or attributes in general.
The # signifies that the rule will apply to an element with the ID that follows the #. If you wanted it applied to all div then you would use a class instead.
Demo: http://jsfiddle.net/6EVtN/
Without seeing more code, the issue could be due to browser compatibility. Example above was tested in Mozilla Firefox 13.0.1 and IE 8.
Updated Demo: http://jsfiddle.net/j4uAM/
Ok, I solved my problem, I used this code:
body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}
I specified the height in content of #main and it just worked, thanks to everybody!
This a perfect solution, but I don't know how to keep code format in stackoverflow:
<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
$(document).bind("mousewheel", function(event) {
event.preventDefault();
});
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
if($("#cart").scrollTop() != 0) {
$(document).unbind("mousewheel");
} else {
event.preventDefault();
}
}});
$("#cart").on("mouseleave", function(event) {
$(document).unbind("mousewheel");
});
</script>
Related
I have a parent which has the CSS property of table-cell, with a child element that need to be 100% the height of the parent. I cannot get this to work in IE Edge - any ideas?
<div class="table">
<div class="table-row">
<div class="table-cell-1">
<a>need 100%!</a>
</div>
<div class="table-cell-2">
some content<br>
that is <br>
quite high
</div>
</div>
</div>
.table {
display:table;
}
.table-row {
display:table-row;
}
.table-cell-1, .table-cell-2 {
display:table-cell;
width:100px;
}
.table-cell-1 {
background-color:red;
}
.table-cell-2 {
background-color:green;
}
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
See JS Fiddle: http://jsfiddle.net/82no4o0x/10/
You have this code:
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
You're asking the a to be height: 100%. But 100% of what? There is no frame of reference. None of the parents have any height specified.
To see what I mean, make this adjustment to the parent:
.table-cell-1 {
background-color:red;
height: 100px; /* new */
}
Now it should work. See demo: http://jsfiddle.net/82no4o0x/23/
When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).
Read more here: Working with the CSS height property and percentage values
Because you haven't defined the table or the table row with a height, when you give the link a height of 100%, the link doesn't know what you want it to be 100% of. Although it looks pretty straight forward to you and me. So first of, try giving your table a fixed height and then making your cells height 100%... But I'm guessing you don't want to do that because you want it to grow or shrink depending on the content within it. I tried a few techniques using position absolute on the cell and positioning it relative to the row, but that didn't work in IE for some reason. So I came up with a bit of a trick/hack using a large top and bottom padding and a negative top and bottom margin.
.table-cell-1 { overflow:hidden }
.table-cell-1 a {
padding:2000px 0;
margin:-2000px 0;
}
https://jsfiddle.net/82no4o0x/24/embedded/result/
I know this questionhas already been asked, but the solutions I found don't work. Here is my code :
body, html {
height: 100%;
background-color: white;
}
body {
margin: 0;
padding: 0;
}
The problem is that a vertical scrollbar appears... Have you got any idea of how I could resolve this ?
Thank you in advance
You can prevent scrollbars appearing on any element with the following css:
overflow: hidden
There is a 'hackish' way of doing it without using overflow:hidden; if you want to know but I think overflow:hidden itself is already good enough. Check out the code : http://jsfiddle.net/rj3jecc1/
<div class="container">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
body,html{
height:100%;
margin:0;
padding:0;
}
body{
background:#ddd;
}
.container{
padding-top:1px;
}
.content{
background:#fff;
padding:20px;
margin:20px;
}
The problem when you set the body to 100% height is, if you have an immediate child container with margin-top, it will 'push' and exceed the 100% height, causing a scrollbar to appear. That's why I have added another container with 1px (or even 0.1 as long as it's > zero) top padding to prevent that and this solution works across latest version of major browsers.
I don't know why you need the body height to be 100% but I would try not to specify its height unless I know my content will be too 'short' to fit through the height (which isn't a common scenario).
I want to create a header with 2 divs in it. The left div needs to be the same height as the right one, but the right one can scale based on its contents.
The left div's contents need to be vertically aligned to the middle.
I tried something like this:
<header>
<div id="test1">
<div>LOGO</div>
</div>
<div id="test2">
<h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1>
</div>
</header>
Use display: table-cell;
Working Demo
Edit:
In case if you want jQuery Solution it works on all browsers
You can fake this using overflow, padding and margins. It's completely cross browser compatible and doesn't need any JavaScript or anything. Just CSS. For example:
.header {
overflow: hidden;
}
.test {
background: red;
padding-bottom: 2000px;
margin-bottom: -2000px;
float: left;
width: 100px;
margin-right: 20px;
}
DEMO
There is also always faux cols (using a background image) but this is a better method that doesn't need images.
If you don't mind a bit of javascript:
$(document).ready(function() {
setHeight($('#test1'), $('#test2'));
// When the window is resized the height might
// change depending on content. So to be safe
// we rerun the function
$(window).on(resize, function() {
setHeight($('#test1'), $('#test2'));
});
});
// sets height of element 1 to equal the height of element 2
function setHeight(elem1, elem2) {
var height = elem2.height()
elem1.css('height', height);
}
DEMO
display: flex;
in the parent container works for me
I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)
im trying to get some background images around a content div. Thing is, the content div should have a flexible width (no problem). The background pics should always be left and right attached to the content div. BUT: the horizontal scrollbar should only be triggered, when the user reduces the window to the width of the content div.
Picture: Structure
I came up with something like this:
<div>
<div class="header">/div>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="content">Content</div>
</div>
<div class="footer">/div>
</div>
.wrapper{
margin:auto;
width:950px;
position:relative;
}
.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}
.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px;
}
Scrollbars always appear when window hits the right absolute div. I need them to be two divs (left/right) because the content div should be flexible and not hide the background when it extends to much.
Someone got a tecnique for this?
you have an unnamed plain root container div.
Add this style for that div (or give a class/id name to wire css deceleration).
Main point is min-width... Keep it same with your container div's width.
also adding body,html{margin:0;padding:0;} will be nicer.
style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"
this will work fine exept for ie6.
For ie, you can apply some js magic.
Let's assume you're using jquery library and you gave id name "shell" to your root container div.
Then try this script only for ie6. (create exclusion or something like that):
$(document).ready(function(){
$('#shell').each(function(){
var that = this;
var contentWidth = 950;
check();
$(window).resize(check);
function check() {
var winWidth = Math.ceil($('body').width());
if(winWidth <= contentWidth) {
$(that).css({'width':contentWidth});
} else {
$(that).css({'width':'100%'});
}
}
});
});
This script will make "shell"s width 100%. (if browser's width is larger than 950px) otherwise it'll lock shell's width with 950px and that will enable scrollbar.
I did something similar for a website, the solution I came with was this:
I created an image with the left and right content on the background and the space of the content in the middle to just be a solid color, even though the image is 1400 x 539 it weights 12 KB, so it's pretty good.
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
body {
background: #fff url(left-and-right.jpg) no-repeat center top;
text-align: center;
}
#wrapper {
margin: auto;
text-align: left;
width: 960px;
}