is there any way to make a div scrollable with overflow-y:hidden; and overflow-x:hidden?
i'm trying without success, maybe i need some js or jquery script?
i mean, i would like to make div scroll on y axes without showing scrollbar on right side( as it is now).
itryed:
.get-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
bottom:0;
clear:both !important;
left:0;
right:0;
top:11%;
margin:0 auto;
background:#fff;
max-height:800px;
overflow-y:no-display;
overflow-x:hidden;
display: block;
}
thanks
EDIT
.log-widget-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
width:99%;
margin:0 auto;
background:#fff;
height:800px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow: scroll;
height:800px;
width:100%;
}
it shows right scrollbar anyway
Let's create a div with a width of 200px: (note the overflow:hidden)
#sidebar{
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
Inside that div we will create the 'scrollable' div. See:
#sidebar #scroller{
width: 215px;
height: 300px;
padding-bottom: 15px;
overflow: scroll;
}
Altough we give it overflow:scroll, the scrollbar isn't visible. This is because this div has a total width of 215px which will make the scrollbar disappear outside the div.
Also see: http://jsfiddle.net/TBsN8/
fixed as shown thanks to Sebass van Boxel
.log-widget-list{
position:absolute;
display: none;
width:98% !important;
top:11%;
max-height:500px;
overflow: hidden;
bottom:0 !important;
left:0;
right:0;
margin:0 auto !important;
}
.log-widget-list .scroller{
overflow: scroll;
max-height:500px;
padding-bottom:3%;
width:104% !important;
}
Related
This question already has answers here:
CSS Disabled scrolling
(3 answers)
Closed 5 years ago.
Hi guys i want my webpage to display everything on it without
scrolling down or up to view anything. Please how can i do it?
it has been giving me some difficulties.
Here is my layout.css
body {
margin:0;
padding:0;
}
#Holder {
width:980px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 21px;
margin-bottom: 21px;
}
#Header {
height: 150px;
background-repeat: no-repeat;
margin-bottom: 11px;
}
#NavBar {
height: 60px;
background-color:rgb(13, 13, 13);
}
#Content {
height:auto;
clear:both;
overflow:auto;
}
#PageHeading {
height:auto;
padding:11px;
}
#ContentLeft {
width:280px;
float:left;
padding-top:11px;
padding-left:11px;
}
#ContentRight {
width:680px;
float:right;
}
#Footer {
height:100px;
vertical-align: bottom;
width:50%;
position: relative;
}
Add one of this to your code:
overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars
I need to add a scrolling bar when there is not enough space on a div.
Also, I would like to insert rows from bottom of this div.
I tried overflow:auto but it doesn't seem to work.
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br>');
});
});
#mydiv {
position: absolute;
top: 1%;
bottom: 1%;
left: 2%;
width: 40vw;
height: 49vh;
max-width: 260px;
font-size: 12px;
border: 1px solid black;
background-color: white;
border-radius: 5px;
overflow: auto;
display: table-cell;
text-align: center;
vertical-align: bottom;
}
#content {
width:100%;
position:absolute;
bottom:0;
overflow: auto;
}
#add{
position:relative;
top:270px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
<div id="content">
</div>
</div>
<button id="add">add</button>
Add height:100% in #content. DEMO
#content{
width:100%;
height:100%;
position:absolute;
bottom:0;
overflow: auto;
}
You can also provide a down scroll for each new element. Test this Fiddle
var a=0;
var content=$('#content');
$(function(){
$('#add').click(function(){
a++;
content.append('line'+a+'<br>');
content.scrollTop(content.height());
});
});
in #content
you should have the following:
#content {
width:100%;
position:absolute;
bottom:0;
overflow: auto;
max-height:49vh;
}
If you want the scrolling bar to be down always, simply do in js:
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br>');
$('#content').scrollTop($(document).height());
});
});
Here's a working FIDDLE
Applying overlflow-y: scroll should've worked but instead made the scrollbars inert on both divs (never seen that before). I removed the outer div and changed the #content div position: absolute it works great now. As content grows, the scrollbar gets longer. If you want the box to expand as the content grows, use position: relativeI also changed the dynamic content from text lines to divs.
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br/>');
});
});
#content {
display: table-cell;
position: absolute;
/*Use relative if you want the box to expand with the content.*/
/*position: relative;*/
top: 1%;
bottom: 1%;
left: 2%;
width: 40vw;
max-width: 260px;
height: 70vh;
/*Use this if you want the box to strech to the edge */
/*min-height:100%;*/
font-size: 12px;
border: 1px solid black;
background-color: white;
border-radius: 5px;
text-align: center;
vertical-align: bottom;
bottom:0;
overflow-y: scroll;
}
#add {
position:absolute;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">
</div>
<button id="add">add</button>
http://jsfiddle.net/maes222/AtPf2/
Can someone help me to fit my content in the div tag. If i add some more <li> then the div tag should be resized automatically.
Now i am confused with many styles. Where i might have gone wrong?
Thanks
CSS
#qhse
{
background-color: #92DF7B;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0.1;
}
a.icon{
width:52px;
height:52px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
Update these two css classes as:
#qhse {
background-color: #92DF7B;
width: 100%;
height: 100%;
}
.item ul {
list-style:none;
display:inline-block;
}
Your is not visible and it has position:absolute so it wont grow your surrounding div;
.item ul{
list-style:none;
position: relative;
}
Maybe you can show us how it should look like and how it should behave.
Remove the
.item ul {display:none;}
and add
.item ul {border: solid 1px;}
and see?
I have a page I'm creating where I want to have to columns the first colomn has a fixed a sized and the second column has to fill the rest of the window width. This is what I came up so far but it doesn't seen to work.
HTML:
<div id="container">
<div class="nav"></div>
<div class="page">my page content</div>
</div>
CSS:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
float:left;
background-color:#FFF;
}
JS FIDDLE
Just remove float: left and add width: 100% to .page
http://jsfiddle.net/scNSL/2/
You probably can do it like this: http://jsfiddle.net/scNSL/4/
<div id="container">
<div class="page">
<div class="nav"></div>
Inhalt
</div>
</div>
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width:100%;
float:left;
background-color:#333;
}
Try this,
.page{
height:500px;
width:100%;
background-color:#FFF;
}
Note: Removed float:left; & added width:100%;
Instead of writing it myself...
Check out this article for more information:
http://css-tricks.com/fluid-width-equal-height-columns/
Should help you learn more about equal height columns 100% height etc.
Try this:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:40%;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width: 60%;
float:left;
background-color:#333;
}
The classical way of creating a fixed + fluid column layout is to float an element next to another element with padding:
HTML:
<div class="container">
<div class="nav"></div>
<div class="page">content</div>
</div>
CSS (float):
.container {
color: #FFF;
}
.nav {
background-color: #666;
float: left;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
height: 200px;
padding-left: 200px;
}
This has some drawbacks, particularly when the .nav and .page elements have differing heights, or when you want to add a border around the .page element.
The modern way of creating a fixed + fluid column layout is to use flexbox:
.container {
color: #FFF;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.nav {
background-color: #666;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
-webkit-flex: 1;
flex: 1;
height: 200px;
}
fiddle (pardon the BEM classes, they're used so that the difference in CSS between these two methods can be seen more readily)
True Fit (allows for borders)
Change to this (see fiddle):
.page{
height:500px;
overflow: hidden; /* or auto */
background-color:#FFF;
}
By not floating the .page, and setting an overflow other than visible, the browser fills a block level element with the space beside the floated element (good explanation here).
Why this can be better than setting width: 100%
Compare these div elements with borders. One with width at 100%, one with the overflow set as above.
I imported a wow slider to my webpage and now my footer is stuck in it. I tried using www.cssstickyfooter.com but it didn't work. I think is has something to do with the position element the slideshow uses. What would be causing this?
LIVE DEMO: http://epicureancateringaz.com/New/123
#footer{
position: relative;
margin-top: -100px;
height: 100px;
clear:both;
background-image:url(../images/backgrounds/footerback.png);
}
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:1000px;
margin:9px auto 9px;
z-index:90;
border:9px solid #FFFFFF;
text-align:left; /* reset align=center */
}
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
You've inserted div#footer into your slideshow div. Just pull it out.