This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to create a custom scrollbar on a div
I'm having the following body
<div id="app-container">
<div id="canvas-container">
<div id="canvas"></div>
</div>
</div>
In CSS I have:
#canvas {
position: absolute;
background-color: transparent;
width: 100%;
height: 100%;
}
#app-container {
height: auto !important;
min-height: 100%;
}
#canvas-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
after that I'm adding divs (with jquery.appendTo and jquery.offset) to <div id="canvas"></div> with
display: inline-block;
position: absolute;
in CSS. So adding such a div cannot affect document size. If I add many divs some of them can be located below the edge of screen. How can I add a scrollbox, so that I can see all of divs?
The property overflow: auto and height: (required height) inside the #canvas should make all the divs inside that visible.
I have used this few times in my application. Hope I didn miss anything thats very obvious.
Related
As the title says, I'd like to know if it's possible to enable only a specific div when body is set to touch-action: none.
My goal is to block all the browser zoom, but allow to zoom in a specific part of it (maybe an image).
Is this possible? maybe in Javascript or pure CSS?
my code is the following:
$("#no-zoom").click(function(){
if( $('body').css('touch-action') == 'none' )
$('body').css("touch-action","")
else
$('body').css("touch-action","none");
$('.zoom').css("touch-action","pan-x pinch-zoom");
});
Obviously, this part is not working: $('.zoom').css("touch-action","pan-x pinch-zoom");
Thank you!
You can use siblings: .notouch and .content.
.notouch will cover all the page and .content will contain elements that can suffer touch interactions.
<body>
<div class="notouch"></div>
<div class="content">
<div class="image"></div>
</div>
</body>
body {
position: relative;
}
.notouch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: none;
}
.content {
position: relative;
width: 0;
height: 0;
}
.image {
width: 200px;
height: 200px;
background: #d3d3d3;
}
Like this, you can use zoom only inside .image.
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 5 years ago.
I want to make a div with a background-color of red to cover my entire page, but I do not want to use CSS position: absolute. Here is my example with CSS position:
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div>
CSS position works for the most part, but then I am unable to create more than one of these divs (they overlap or cancel each other out because of top: 0 and left: 0). When you scroll down, I want you to see additional divs.
It would really help if there was a pure CSS solution, but JavaScript and HTML are open to me as well. JUST NO JQUERY.
What about using viewport height and viewport width?
I've created an example in this JSFiddle.
body, html {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 100vh;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.three {
background-color: yellow;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
If you want to make div to occupy entire space use vw and vh
because making div alone height:100% and width:100% would not do it
without using viewport units
check this snippet
div{
width: 100%;
height:100%;
background:red;
}
html,body{
height:100%;
width:100%;
}
<div ></div>
but making html and body to have height and width is a bad idea
so to skip it use view port units
check this with viewport unist
div {
width: 100vw;
height: 100vh;
background: red;
}
<div></div>
Hope it helps
Older browsers such as IE7 and 8 could be supported without using visual height and width units by using a single absolutely positioned container with inner divs inheriting height and width property values.
CSS
body {
margin: 0px; /* optional */
}
#box {
position:absolute;
height: 100%;
min-width: 100%;
}
.page {
padding: 5px; /* optional */
height: inherit;
}
HTML
<body>
<div id="box">
<div class="page" style="background-color: red">
<div style="width:25em; background-color: gray">25em</div>
</div>
<div class="page" style="background-color: green">2</div>
<div class="page" style="background-color: white">3</div>
</div>
</body>
Update: the width property of the container has been replaced by a min-width property, introduced in IE7, to fix an ugly horizontal scrolling issue. Supplying width for inner div elements was removed as being unnecessary.
Simply change the top: value for each one. The first one would be 0, the second 100%, the third 200%, and so on. Here's a working example:
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;background:red;"></div>
<div style="width: 100%; height: 100%; position: absolute; top: 100%; left: 0; background:blue;"></div>
<div style="width: 100%; height: 100%; position: absolute; top: 200%; left: 0; background:green;"></div>
Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}
Here is a simplified JSFiddle of the problem.
As you can see, the content is beat out of alingment with the header because of the scrollbar.
As far as I know, the only way to deal with this is to calculate the width of the scrollbar using Javascript (David Walsh's excellent method springs to mind) and to set it as left/right: -scrollbarwidthpx value to the header.
However, considering the dynamic nature of the page I'm working on, with the headers place in the DOM and position changing depending on at what point the user has scrolled to, this is an option I am hoping to turn to only if there's nothing else I can do.
My question is, is there any way that I can maybe take the scrollbars or the content out of the flow while preserving a scrolling overflow, or otherwise align the two elements using only HTML/CSS? Are scrollbar widths consistent across all browsers/OS's that have them affect the flow? Or will I have to resort to using Javascript to align them?
Thanks!
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
.scroll {
overflow: auto;
width: 100%;
height: 100%;
}
#content{
width: 400px;
height:auto;
margin: auto;
background:gray;
}
.header {
width: 400px;
position: fixed;
margin: 0 auto;
height: 60px;
background: yellow;
z-index: 10;
}
.content {
height: 1200px;
background: linear-gradient(red, orange);
width: 100%;
margin: auto;
position: relative;
z-index: 1;
border-top:61px solid;
border-bottom:1px solid;
}
<div class="scroll">
<div id="content">
<div class="header"></div>
<div class="content"></div>
</div>
</div>
This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 5 years ago.
I have a div with element styles like this:
<div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>
I need to allow scrolling along the y-axis when it becomes higher than 300px, this works fine. But I need to set "visiblity = false" to scroll bar itself.
I tried to use this element style:
overflow-y: hidden;
While it hides the scroll bar, it also disallows scrolling. Is there a way to get scrolling without having the scrollbar visible?
It's better, if you use two div containers in HTML .
As Shown Below:
HTML:
<div id="container1">
<div id="container2">
// Content here
</div>
</div>
CSS:
#container1{
height: 100%;
width: 100%;
overflow: hidden;
}
#container2{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 20px;
}
I know this is an oldie but here is a quick way to hide the scroll bar with pure CSS.
Just add
::-webkit-scrollbar {display:none;}
To your id or class of the div you're using the scroll bar with.
Here is a helpful link Custom Scroll Bar in Webkit
Try this:
HTML:
<div id="container">
<div id="content">
// Content here
</div>
</div>
CSS:
#container{
height: 100%;
width: 100%;
overflow: hidden;
}
#content{
width: 100%;
height: 99%;
overflow: auto;
padding-right: 15px;
}
html, body{
height: 99%;
overflow:hidden;
}
JSFiddle Demo
Tested on FF and Safari.