I need to build a dynamically-resizing scrolling div.
The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.
I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto.
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
<!--Put loads of text in here-->
</div>
</div>
The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.
I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.
So my question is: Can this be done using just html, or- failing that- javascript?
You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).
Given this HTML:
<div id="gridcontainer"></div>
the CSS should be something like:
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
Live Demo
Since IE9 you can use viewport units.
Let's say that the height of your container is dynamic, unless its size is greater than the window height. In that case we stop the expansion & activate the scroll.
#container{
background: #eaeaea;
max-height: 100vh;
overflow-y: scroll;
}
div{
outline: 1px solid orange;
width: 200px;
height: 200px;
}
<div id='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
If you are trying to make element fit the screen then you can set the value of hight and width of the element to 100%.
You will also need to set the height of html and body
html, body {height: 100%}
#gridcontaine {
height: 100%;
width: 100%;
}
Related
How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.
I'm adding a div at the bottom of a video inside an iframe.
Generally I append the new Div to the iframe's parent and it's fine.
BUT, if some parent divs have some css like width:100% and overflow:hidden, it doesn't work and the div remains behind the iframe's video.
<style>
.defaultPhoto{
width: 434px;
height: 278px;
overflow: hidden;
}
.defaultPhoto .photo{
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper{ background: red; }
</style>
<div class="defaultPhoto">
<div class="photo">
<iframe width="434" height="278" src="https://www.youtube.com/embed/2xbgl7OJrg4"></iframe>
<div class="wrapper" id="Div0" >test</div>
</div>
</div>
This works:
http://jsfiddle.net/kav7b3os/87/
This NO:
http://jsfiddle.net/kav7b3os/70/
So, how can I be sure to put my new created div at the bottom of an iframe video and be sure it is visible in the viewport?
I used also the elementFromPoint to detect if the div is visible, with no luck.
You have a height on your defaultPhoto div of 278px and then inside this you have set the height of your photo div to 100% (i.e. 278px) then inside this, you set the height of your iFrame to 278px. So, the iFrame takes up the full height of the parent container - the full 100%. Therefore, if you don't allow overflow your new wrapper div can't be seen. The way to fix this, if you don't want to allow overflow is to increase the size of the defaultPhoto div. Depending on your requirements, you could do this with javascript at the point you add your new div.
Check out this fiddle which shows your layout with a larger defaultPhoto:
http://jsfiddle.net/fn5zancp/2/
.defaultPhoto{
width: 434px;
height: 318px;
overflow: hidden;
}
I have a one-page site. It is basically a list of sections. One of the section has a button which overlays a dialog when clicked. This dialog ends up expanding the width of the page and a sideways scroll bar is introduced.
This really spoils the look and I'm looking to make the dialog not expand the page.
For reference, it is the same kind of layout as here:
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
I tried setting max-width: 100% and overflow-x: hidden on the problematic section but to no avail.
Here's the problematic section's markup:
<section id="music-section">
<div class="music-container">
<h1> About Us </h1>
<h2> The following is our mission statement on campus. </h2>
<div class="music-row">
<music-demo></music-demo>
</div>
<div class="music-row">
<music-demo-duplicate></music-demo-duplicate>
</div>
</div>
</section>
And the CSS:
.music-row {
width: 100%;
height: 330px;
}
.music-container {
background: rgb(236, 183, 9);
padding-top: 1%;
max-width: 100%;
}
are you using "position:absolute" in your div?
your elements wouldn't align to your div with position:absolute, other cause may be the size of the div, are using % in the values width and height.
Unfortunately the CSS you provided doesn't correspond to your HTML. If you've got a fluid layout (resizes based on screen/browser size) and the parent container of music-section is width: 100%; or in this case max-width, this can cause problems I've discovered. Often times the child element will expand beyond the parent. What worked for me is this:
.music-row {
width: auto;
height: 330px;
}
Set your child to auto rather than 100%. I hope it works for you.
How to increase a background size automatically when a new item is added to its page dynamically.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
}
#mid {
background-image: url(scripts/white.png);
width: 950px;
margin-left: 210px;
height: 1700px;
}
HTML
<div id="container1">
<div id="mid">content goes here</div>
</div>
I am unable to increase the background size beyond the height it defines even if I define it as auto not able to increase the size automatically when a new item is added.
please help I am in a need of it for my college project.
Thanks in advance waiting for your replies.
The div #container takes up the height of its child element, i.e, #mid, which in this case has a height of 1700px. Thus your content is overflowing from that div element(#mid).
You can either remove the height property from #mid, or have an overflow-y: scroll;.
Use background-size property. It might be help you.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
background-size: 100% auto;
}
I believe a div if not styled to have definite height and width will grow and shrink according to the elements within the div.
add background-size: auto 100%; this value to #container1 div in css
I am using an old CSS trick to get a semi-transparent background for some content, without the content appearing semi-transparent. Here is the HMTL:
<div id="frame">
<div id="opacityFrame">
</div>
<div id="contentFrame">
<div>
<!-- Main Site Content Here -->
</div>
</div>
</div>
Here is the corresponding CSS:
#frame
{
width: 90%;
margin: auto;
position: relative;
z-index: 0;
}
#opacityFrame
{
background: #00ff00;
opacity: .15;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#contentFrame
{
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
My problem is that because #frame is position: relative, it's height does not dynamically expand with its content. Both #opacityFrame and #contentFrame are set to 100% height and width and they appropriately expand to fill #frame which is great. The issue is that I need #frame's height to grow with the contents of the child DIV of #contentFrame because that DIV's height dynamically adjusts with the content placed in it.
I ended up having to create a jQuery function:
function resizeFrame()
{
$('#frame').height($('#contentFrame > div').height());
}
NOTE: The reason there is a child DIV of #contentFrame is because #contentFrame's height always reads as zero for some weird reason. I'm assuming it has to do with its position being absolute.
This code works great and accurately resizes #frame's height to the height of the child DIV of #contentFrame. However, I do a lot of ajax that changes the content within that DIV. One solution would be to call resizeFrame() with EVERY ajax event but it just seems so tedious. Is there an event or something I can tie to that would execute this function without my explicitly having to call it? I tried the following events but they didn't seem to work; maybe I did them wrong.
$('#subFrame > div').resize()
$('#subFrame > div').change()
Neither of these seemed to fire when the contents of the child DIV were modified. Maybe I'm going about this the wrong way? I do not want to use transparent images for the background.
Try taking position: absolute off of the contentFrame but leaving it on the opacityFrame. That should cause it's parent to resize, and the opacityFrame to still overlay everything.
do you have to use opacity? If it's a solid color, consider RGBA or if it's not solid, consider a semi-transparent PNG. That way you can nest them.