<div class="main">
<div class="content">
<div class="left_container">
</div>
</div>
</div>
In the code above, I have added a scroll to the left_container div.
But I want to hide it! Referring to other questions and answer, I found out to set overflow:hidden in the parent div class.
But still the scroll is not hidden in the child class?
CSS:
.content
{
background-color: white;
width:100%;
height:auto;
margin-top:10%;
position: absolute;
overflow: hidden;
}
.left_container
{
background-color:;
margin-left:5%;
margin-top:5%;
width:70%;
height:1000px;
overflow:auto;
}
Well I have also tried to set it hidden in the body! still not working..?
There is actually a simple way.
.left_container { overflow: hidden }
Now give left_container a child div and apply the following styles
.left_container-child {
height: 100%;
overflow-x: scroll;
width: 101%;
}
What this does is push the scrollbar out of sight.
You really want to check this over on differnet browsers and make sure you get the sweet spot that your content doesnt get cut off.
You can see a working example here (change the width on left_container-child to experiment pushing the scrollbar out).
Example
You have not used overflow:hidden in .left_container.
Try:
.left_container {
background-color:;
margin-left:5%;
margin-top:5%;
width:70%;
height:1000px;
overflow:hidden;
}
I think can't hide scroll bar for overflow hidden content.
you can try using scroll bar plugin http://nicescroll.areaaperta.com/demo.html
Related
I'm trying to create a layout using flexbox but I'm stumped as to why I can't force a particular section of my UI to overflow with scrollbars. Everything seems to work great until a large child is added which seems to expand everything.
Here's the pen: http://codepen.io/tuckwat/pen/NNWRaB?
Notice that scrollbars appear on the whole page, I want scrollbars to appear on the #view container (dark blue) when a child gets too big.
Here's a pen with the overflow: auto added to #view - http://codepen.io/tuckwat/pen/VawKyp
How can I get this layout to work? I don't want to use absolute positioning on the view because the sidebar or appbar can dynamically resize.
HTML
<div id="body">
<div id="appbar">appbar</div>
<div id="main">
<div id="sidebar">side</div>
<div id="content">
<div id="navbar">nav</div>
<div id="view">
This view container should scroll
<div id="view-content">
This content makes the view grow too large
</div>
</div>
</div>
</div>
</div>
CSS
#body{
background: #ccc;
display:flex;
flex-direction: column;
position:absolute;
left: 0px;
right: 0px;
bottom: 0px;
top:0px;
}
#appbar{
height:55px;
}
#main{
display: flex;
flex:1;
background: #ddd;
}
#sidebar{
height:100%;
background:#660099;
width:50px;
flex-shrink:0;
}
#content{
display:flex;
flex:1;
flex-direction:column;
}
#navbar{
height:20px;
background:#3cd;
}
#view{
flex:1;
background:#126;
overflow: auto;
}
#view-content{
width:1500px;
height:1500px;
background: #ff6600;
}
Another wrinkle... I found a similar blog post that outlines the issue with a solution: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
When applied to my codepen it works great in Chrome and IE but scrollbars don't show up in Firefox. I thought the days of fighting browser quirks were over...
http://codepen.io/tuckwat/pen/qZBrya
#body{
overflow: hidden;
...
}
#content{
overflow: hidden;
...
}
Finally - solution
I was close, but Firefox requires min-height on Flexbox items. Here's a pen that works across IE, Chrome, and Firefox: http://codepen.io/tuckwat/pen/oxNZJW
This is rather odd.
All three of your codepens are missing "overflow: auto;" for the view class. Adding it adds does exactly what you wanted, as shown in the absolutely positioned codepen.
What browser are you using?
(I would do this in a comment, but I don't have enough rep yet.)
I have a "fixed" DIV on the very top of my page:
<div id="banner-wrapper">
<div id="banner"></div>
</div>
with the following CSS:
#banner-wrapper {
width:300px;
height:500px;
}
#banner {
width:300px;
height:500px;
position:fixed;
top:0;
left:0;
background:orange;
}
This "fixed" DIV is followed by a "content-wrapper" DIV:
<div id="content-wrapper">
<div id="content-left">
content left
</div>
<div id="content-right">
content right or sidebar
</div>
</div>
with the following CSS:
#content-wrapper {
width:300px;
background:red;
position:absolute;
top:500px;
bottom:0;
}
#content-left {
width:150px;
float:left;
}
#content-right {
width:150px;
float:right;
}
The issue I'm having is that the "content-wrapper" DIV does not fully cover the "fixed" DIV. The top of the "content-wrapper" covers the "fixed" DIV and the bottom of "content-wrapper" becomes transparent, showing the "fixed" DIV beneath.
I was able to solve the problem by giving the "body" a height in CSS. However, I do not want to give the "body" a height as I do not know the true hight of the content and would like it to remain flexible. I've also have tried inserting
<div style="clear:both;"></div>
before the closing tags but it does not force the "content-wrapper" down.
Here is an example of the issue on JSFiddle.
As you can see, the "red" box does not reach the "blue" box even though it is set to absolute, bottom 0. From what I can tell it reaches the bottom if it does not contain any DIVs inside of it. But once I add the "content-x" DIVs, it no longer reaches the bottom of the page.
Thank you for any help.
You could relatively position the element #content-wrapper rather than absolutely positioning it. Then you can omit the top/bottom positioning and it will behave as expected.
The reason it wasn't working in the first place was because you were giving the absolutely positioned element a height of 100%. Therefore it will have the same height is the window, which is not what you wanted.
Updated Example
Change the following:
#content-wrapper {
width: 300px;
height: 100%;
background: red;
position: absolute;
top: 500px;
bottom: 0;
}
to:
#content-wrapper {
width: 300px;
background: red;
position: relative;
}
Absolutely positioned (side yellow advertisements) div's cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear only when window is smaller than main #container and these advertisement div's should not affect the layout. It doesnt matter if they get covered.
HTML:
<div id='topbar'>
<div id='menu'> <a href='#'>Link1</a>
<a href='#'>Link2</a>
<a href='#'>Link3</a>
<a href='#'>Link4</a>
</div>
</div>
<div id='container'>
<div id='pushfix'></div>
<div id='ad_container'>
<div id='ad1'>ad</div>
<div id='ad2'>ad</div>
</div>
Lorem ipsum placeholder text
</div>
CSS:
body, html {
height:100%;
}
body {
margin:0;
}
#topbar {
width:100%;
background-color:#DCDCDC;
height:40px;
position:absolute;
}
#menu {
width:250px;
background-color:#B3B3B3;
margin:0 auto;
height:100%;
text-align:center;
line-height:40px;
}
#menu a {
color:#fff;
}
#container {
height:100%;
background-color:#808080;
width:240px;
padding:0 5px;
margin:0 auto;
}
#pushfix {
height:40px;
}
#ad_container {
position:relative;
width:240px;
}
#ad_container div {
width:100px;
background-color:yellow;
height:300px;
position:absolute;
}
#ad1 {
left:-105px;
}
#ad2 {
right:-105px;
}
Exact layout replica: http://jsfiddle.net/8UkQA/
Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.
Here's a working example: http://jsfiddle.net/8UkQA/1/
I may like to further add, if the same problem is being faced and by using the solution suggested by #Aaron the page seems to not scroll then you can use axis specific version of the "overflow" attribute, as following,
overflow-x: hidden;
This will only hide the content protruding on the right hand side (or left hand side if website is RTL) and not the vertical content.
Also to further enhance this method if the protruding content is appearing only at a certain resolution (as in my case), you can use css media query to restrict the behaviour.
#media (min-width: 1500px) {
body {
overflow-x: hidden;
}
}
You need to give the child coordinates a.k.a. top: 0; left: 0;
// need to disable AutoScroll first, otherwise disabling the horizontal scrollbar doesn't work
flowLayoutPanel.AutoScroll = false;
// disable horizontal scrollbar
flowLayoutPanel.HorizontalScroll.Enabled = false;
// restore AutoScroll
flowLayoutPanel.AutoScroll = true;
Hope this will resolve your issue.
I have two divs: left and right. In the left there is a long text. In the right there are some annotations about the text (more divs). If the text of the left is longer than the annotations I'm like it. But when the annotations are bigger/longer then the left div, I want to make the right div's content overflow.
With other words: two divs without fix height, make overflow the right one.
The code is above or JSFiddle
<div id="container">
<div id="left">Some long-long text, allways to show</div>
<div id="right">Some divs not necessarily show all</div>
</div>
css:
#container {
background-color:white;
float:left;
}
#left {
width: 79%;
float:left;
}
#right {
width: 19%;
float:right;
overflow: hidden;
}
But it's not working. :(
As Jan suggested in his last comment, I think you need to use javascript or jQuery to accomplish this.
This question outlines an approach using javascript that was accepted by the OP, though the OP made no comments on his process of execution.
I've modified a js fiddle from this answer to a similar question.
It uses the following:
CSS
#main{
width:auto;
}
#one{
height:auto;
width:200px;
display:inline-block;
float:left;
}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;
}
div{
border:1px solid black;
}
Javascript
$(document).ready(function() {
$("#main").css("height",$("#one").height());
});
And I believe addresses your desired outcome.
You have to use overflow: hidden on #left, and not on #right.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.