I am currently creating a website and i'm trying to fix the max height to 1100px. However if i try do this i get 2 scroll bars coming up assuming because of the div. Could anyone help me? here is a snippet of my code.
CSS:
html, body {
border:0;
margin:0;
padding:0;
overflow-x: hidden;
}
#wrap {
width: 960px;
margin: 0 auto;
}
Just use the max-height property on the your #wrap element. It might also be advisable to move the overflow-x property, and change it to overflow-y, or simply overflow too:
html, body {
border:0;
margin:0;
padding:0;
overflow-x: hidden;
}
#wrap {
width: 960px;
margin: 0 auto;
overflow: hidden;
max-height: 1100px;
}
See this jsFiddle Demo
Edit:
I have added overflow-y to the html, body definition to prevent the default viewport scrollbar from showing.
Related
<html>
<body>
<div class="container">
<div class="menu"></div>
<div class="list"></div>
</div>
</body>
</html>
.menu{
float:left;
width:50%;
}
.list{
float:right;
width:50%;
}
how to disable the whole html's scroll. but the menu div and list div can scroll vertically?
and dependently?
I mean when I scroll the left div the right div do not have to scroll together.
You need to start from the html tag down. It and all parents of your scrollable elements should have the height of the viewport.
This means that the html, body, .container and both scrollable elements should have a height: 100% or height: 100vh.
Then you can make the scrollable elements actually scroll independently by adding overflow: hidden.
If this doesn't make sense, please see this pen which I made for you.
You need to prevent vertical scrolling on your .container. This can be done by using the overflow CSS property. Look at the code below on how you can achieve this and also enable vertical scrolling for your two elements (.list and .menu).
body {
margin: 0;
padding: 0;
}
.container {
max-height: 100vh;
height: 100vh;
overflow-y: hidden;
display: flex;
}
.menu {
overflow-y: auto;
width:50%;
}
.list {
overflow-y: auto;
width:50%;
}
I am having a problem with scrolling on the mobile version (1299px #media defined rule) of the vertical menu on my website. Link is: https://my-digital.ro/wp/
Video explaining problem: https://youtu.be/K9fQJPb6WMI
So basically, my issue is that I am trying to make the whole menu scrollable on mobile. It worked fine when I added overflow: scroll property to the elements, except that it does not work when a sub-menu is expanded. It just gets stuck, as it was overflow: hidden and I can not scroll further.
Actual CSS is:
.clearfix {
display:block;
clear: both;
position: sticky;
}
#media only screen and (max-width: 1299px) {
#content {
position:absolute;
padding-left:0px;
z-index:102
}
#main-nav {
overflow: scroll;
}
.clearfix {
overflow: scroll;
}
header {
position:fixed;
min-height:100%;
height:auto; }
I have tried adding overflow:scroll even to the header elements inside #1299px rule and others too, including ul> li .submenu but nothing works :(.
give some relative height to the main_nav:
#main-nav {
overflow-y: auto;
height: 90vh;
}
where vh is relative to 1% of the height of the viewport.
And please use overflow: auto; instead of overflow: scroll;
Just make these changes in your style.css
#media only screen and (max-width: 1299px)
#main-nav {
overflow-y: auto;
height: 400px;
}
I have a div with the overflow-y: scroll; property I need to remove this property when user execute the print (Ctrl+P)
<div id="taskList" class="uk-padding-small">
</div>
<style>
#taskList{
overflow-y: scroll;
min-height: 400px;
height: 400px;
}
#media print {
#taskList{
overflow-y: auto;
min-height: auto;
height: auto;
}
}
</style>
This work fine with other properties like width, margin, padding. But I can't overwrite the overflow-y property and my document don't show the full content.
You can try this runnable.
https://jsfiddle.net/atsuya007/j3f6d8ht/
be sure to make the media print at the end of the CSS.
By reversing the logic, it works
.fullheight{
min-height:100%;
height:fit-content;
}
#media screen {
.fullheight{
height:100%;
overflow:auto
}
}
I have a div and I want it to fill the whole page without any horizontal or vertical scrolling.
The html is like:
<body>
<div class="container">
</div>
</body>
and the css like:
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
Normally with vh it works, but because of some padding applied on container it doesn't work. So what technique can I use to solve this problem?
The JSFiddle is here
Try using box-sizing: border-box on your .container element. Doing so will have the padding and border of an element included with width and height assignments.
.container {
box-sizing: border-box;
margin: 0 auto;
padding: 20px;
width: 800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
This has to do with the way that css adds the padding to the height to calculate the total height. There's one quick and flexible fix for all of your elements though, as explained in Paul Irish's box-sizing:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Not Sure Will this help you but you can give it a try-
give position relative to your body and position fixed to your div.container with width 100% and height 100%.
body{
background: #222;
margin:0;
padding: 0;
position:relative;
}
.container{
position:fixed;
left:0;
top:0;
width:100%;
background: red;
height: 100%;
}
Box-sizing FTW! If you need to include the padding as part of the elements dimensions then box-sizing: border-box is your only hope.
FWIW you should be aware that Viewport Units are not fully supported so if you need something more cross-browser you can easily avoid using 100vh by using 100% instead.
E.G:
html, body {
height:100%;
min-height:100%;
}
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: red;
height: 100%;
box-sizing: border-box;
}
<div class="container">
</div>
Here's the template I'm using: http://tympanus.net/Blueprints/ElasticContentSlider/
Source here: http://tympanus.net/codrops/2013/02/26/elastic-content-slider/
Closest I've gotten is changing the height of '.main' but it changes the size of the main content box.
try to put a html, body, .container, .main {overflow:hidden;} the is the best solution for you bro...
this is what you need
.cbp-contentslider li > div {
position: absolute;
top: 9em;
bottom: 3.313em;
width: 100%;
left: 0;
padding: 0 1em;
overflow-x: hidden;
overflow-y: hidden; //changed this from `auto` to `hidden`
}
to remove the extra space change your css to something like this:
body .container { height:72%;}
.cbp-contentslider { height:100%;}
To simplify the layout even further I would suggest:
body .container { height:66%;}
.cbp-contentslider { height:100%;}
.main, .container > header { padding:0; width:82%; } // Don't need such padding for .main just use width/margin