I am dynamically creating multiple divs inside a div. I want all these inner divs to avoid overflowing from the outer div. I have attached jsfiddle to reproduce the problem.
https://jsfiddle.net/t3jgdodm/1/
attaching CSS:
html,
body {
height: 100%;
}
#topDiv {
background-color: lightblue;
max-height: 100px;
width: 100%;
padding: 10px;
}
#insideDiv {
background-color: pink;
max-height: inherit;
overflow-y: auto;
}
I want all divs to be under single scroll.
I am using multiple divs as each div represents a new entered keyword and the div will dynamically generate inside the outer div. I am ready to change the div element into other HTML element if the problem if due to div element.
Is this what your trying to do?
https://jsfiddle.net/t3jgdodm/2/
#topDiv {
background-color: lightblue;
max-height: 100px;
width: 100%;
padding: 10px;
overflow-y: scroll;
}
i added overflow-y: scroll to you #topDiv element id
Important note: You're using repeating ID's which is completely taboo. Make them classes if you plan on re-using them, as I have in my example below.
To have a scrollbar on the outer div, put overflow: auto on your #topDiv instead of your .insideDiv. https://jsfiddle.net/t3jgdodm/11/
#topDiv {
background-color: lightblue;
max-height: 100px;
width: 100%;
padding: 10px;
overflow: auto;
box-sizing: border-box;
}
.insideDiv {
background-color: pink;
}
I've added a box-sizing: border-box; to #outerDiv so that the padding: 10px + width: 100% doesn't cause it to flow off the screen.
Also, I've removed max-height from .innerDiv to avoid having them overlap.
Just remove the max-height: inherit from the #insideDiv (it's inheriting the max-height: 100px from it's parent) and move the overflow-y: auto to the #topDiv.
html,
body {
height: 100%;
}
#topDiv {
background-color: lightblue;
max-height: 100px;
width: 90%;
padding: 10px;
overflow-y: auto;
}
#insideDiv {
background-color: pink;
}
In your exact fiddle, the scrollbar gets pushed off the edge. That's just because the width of the #topDiv exceeds 100% (you need to add box-sizing: content-box to prevent that).
Also, probably just in your example, but remember you shouldn't have more than one element with any given ID. Use a class instead.
The problem was with max height attribute. I changed the css to height.
html,
body {
height: 100%;
}
#topDiv {
background-color: lightblue;
height: 100px;
width: 100%;
padding: 10px;
}
#insideDiv {
background-color: pink;
height: 33%;
overflow: scroll;
}
I wanted to give a proper answer for your issue.
Don't control overflow with the child (#innerDiv), control it with the parent (#topDiv). You don't tell water where to go, you put in a different-sized glass.
Here's an example:
<div id="parent">
<div>
Some inside content
<br> More inside content
<br> More inside content
<br> More inside content
<br> More inside content
<br> More inside content
<br> More inside content
<br> More inside content
<br> More inside content
<br> More inside content
<br>
</div>
</div>
#parent {
background-color: lightblue;
max-height: 100px;
overflow-y: scroll;
}
The problem is you have multiple divs with the same id, make that id a class first of all, secondly you have max-height: inherit on the insidediv, all this means is they get the max-height from the parent, so they'll have the same max-height as the topDiv, with no real restriction. The only real ways I can think of to fix this are to either put an overflow: auto on the outer div or somehow work out what the height of the insidedivs should be.
So to simplify, the HTML should be more like:
<div id="topDiv">
<div class="insideDiv">
Some inside content
<br> More inside content
<br> More inside content
<br>
</div>
<div class="insideDiv">
<br>check
<br>check
</div>
<div class="insideDiv">
<br>check
<br>check
</div>
</div>
and the CSS should be more like:
html,
body {
height: 100%;
}
#topDiv {
background-color: lightblue;
max-height: 100px;
width: 100%;
padding: 10px;
overflow-y: auto;
}
.insideDiv {
background-color: pink;
overflow-y: auto;
}
Or completely remove the overflow-y from the insideDiv class and keep it on just the topDiv id.
remove "max-height: 100px" from topDiv. It will work
Related
I'm facing problem with breaking the line on website. What do I mean?
HTML code
<main class="clearfix">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</main>
<button>Add</button>
With such HTML code I'd like to have:
fixed height on main element (for example 80vh)
fixed height for all the elements first and third 40vh + second 80vh
fixed width for first and third element 50vw
fluid width for second element - but this is main problem - second element has to be in the same place and grow horizontally (to create scroll on the bottom of the site)
Please find my codepen
I've added button that'll add pixels to second element - but it destroys my website.
I'm not sure if flexbox is better than floats.
I'll appreciate any tip.
Here is the snippet:
let counter = 0;
document.querySelector("button").addEventListener("click", function() {
document.querySelector(".second").style.width = `calc(50% + ${counter}px)`;
console.log(counter);
counter++;
});
* {
padding: 0;
margin: 0;
}
main {
max-height: 80vh;
}
.first,
.third {
height: 40vh;
width: 50vw;
background-color: black;
float: left;
}
.third {
background-color: red;
}
.second {
height: 80vh;
width: 50%;
float: right;
background-color: blue;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
<main class="clearfix">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</main>
<button>Add</button>
I would suggest you to go with position properties. Since you have a little difference between the order of your DOM element and their visual representation, like 1,2,3 in the DOM, but visually it's more like 1,3,2.
However, in such situation float is your enemy. I'm not 100% sure about flex, AFAIK flex would keep all the elements inside the parent element and prevent the scrolling.
If you go with absolute positioning, (since you already have the heights and widths defined)
Apply:
position: relative to the main element, it will be the base point of the child elements if they are set to absolute.
overflow-x: scroll to the main element. it will allow you to scroll horizontally when you increase the width of your second element.
position: absolute on .first, .second, .third, as you have the height and width defined, now set their position accordingly, check the snippet, you'll get it.
Finally you're good to add more value to your width of the target element.
Tip: always keep a consistency in your css units, for example, if used vh / vw use this for similar elements at least, or if px / em / rem is used, try to use the same accordingly.
Check the snippet in full page mode
let counter = 0;
document.querySelector("button").addEventListener("click", function() {
document.querySelector(".second").style.width = `calc(50vw + ${counter}vw)`;
document.querySelector("#added").textContent = counter;
counter++;
});
* {
padding: 0;
margin: 0;
}
main {
overflow-x: scroll;
position: relative;
min-height: 80vh;
}
.first,
.third {
height: 40vh;
width: 50vw;
background-color: black;
position: absolute;
left: 0;
top: 0;
}
.third {
background-color: red;
top: 40vh;
}
.second {
height: 80vh;
width: 50vw;
background-color: blue;
position: absolute;
left: 50vw;
top: 0;
}
button {
margin: 30px 5px;
border: 1px solid #cecece;
padding: 5px 10px;
}
<main>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</main>
<button>Add</button>
<p><span id="added">0</span>vw Added to blue div's width</p>
When I add dynamic content to .innerright. Why doesn't the width of .a increase dynamically. What should I do it to make sure .a takes width of .innerright container dynamically. I use javascript code to add the content dynamically.
var list = '';
for (var i = 0; i < 100; i++) {
list = list + i + 's';
}
$('.innerright').append(list);
.outer {
width: 500px;
height: 200px;
background-color: red;
}
.innerleft {
width: 20%;
float: left;
height: 100%;
background-color: yellow;
}
.innerright {
width: 80%;
height: 100%;
float: left;
background-color: green;
overflow: scroll;
}
.a {
height: 20px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
<div class='innerleft'>
</div>
<div class='innerright'>
<div class="a">
</div>
</div>
</div>
It's because you set a calculated width on the container element and specifically tell the container to deal with overflowing content by adding a scroll bar.
As far the css is concerned the element is always at it's calculated width and the extra content just expands into the overflow area rather than affecting the container's width.
I'm not sure this is fixable in css alone while maintaining the overflow property to scroll. Everything is doing as it should, the elements are taking the widths they should take and that is being maintained throughout dynamic content editing - overflow is not part of width.
You could use the javascript scrollWidth value and use that to dynamically edit the width of the .a element.
See the fiddle here
The important bit is:
$('.a').width($('.innerright')[0].scrollWidth);
which gets the scroll width of the .innerright element, that includes the width and the overflow and uses that to set the width of the .a element, which also now goes into the overflow area.
And of course, you'll need to call and recall this after you add any dynamic content!
NB, the [0] means get the first element in the array of DOM nodes returned by the JQuery call.
As others pointed out, block elements don't grow, they overflow. You're CSS makes that overflow scrollable. In order to acheive your goal, wrap the content (<a> and text) in an inline-block element, which will grow, and now you're <a> will receive it's parent (grown) width, and the <div> will still have scrollable overflow:
var list = '';
for (var i = 0; i < 100; i++) {
list = list + i + 's';
}
$('.contentspan').append(list);
.outer {
width: 500px;
height: 200px;
background-color: red;
}
.innerleft {
width: 20%;
float: left;
height: 100%;
background-color: yellow;
}
.innerright {
width: 80%;
height: 100%;
float: left;
background-color: green;
overflow: scroll;
}
.a {
height: 20px;
border: 1px solid red;
}
.contentspan {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
<div class='innerleft'>
</div>
<div class='innerright'>
<span class='contentspan'>
<div class="a">
</div>
</span>
</div>
</div>
By the way, this has nothing to do with dynamic content or JS. If the text was inlined in the HTML you'd get the exact same results.
Heres an image of my website right now: http://i.imgur.com/nE0a0cj.jpg
The section says "What is Spheroid" is ment to be my content container. However, I can't seem to make it go from the header to the footer.
My HTML code:
<div id="container">
<h2>What is Spheroid?</h2>
</div>
My CSS Code:
html, body {
background-image:url(001.png);
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
}
#container {
width: 800px;
height: 100%;
text-align: center;
margin: 0 auto;
background-color: #38788E;
}
I've tried using the "height: 100vh;" property, but it makes the container go beyond the footer so the page needs to be scrolled.
Also think it might have to be done with JavaScript, but that's a field where I'm going to need some support.
Thank you guys in advance :)
EDIT -
So I figured from one of the answers, that my div was inside another div. So I fixed this, and with the same code as provided it not looks like this: http://i.imgur.com/vYRVqhN.png
Thought it might have been the bg size, but as it is only set to "cover" it shouldn't be the issue.
Finally got your requirement, flex box layout is your friend.
View the demo in full page mode:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
flex: 1;
width: 800px;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
Another approach with box-sizing:
html, body {
height: 100%;
margin: 0;
}
body {
box-sizing: border-box;
padding-bottom: 70px;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
width: 800px;
height: 100%;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
It seems like you placed your <div id="container"> inside another div or any parent element (except html and body). If so, the parent element/s don't have a height of 100%. If you add height:100%; to the parent element your container must fill the entire height of the parent element.
I tested your code provided and it's working.
am trying to emulate this theme:
http://themetrust.com/demos/ink/?project=the-city-of-samba
But instead make the blog post always remain centered in the right hand side (space outside of the fixed sidebar) and have the blog post be of a % width.
I currently have this set up on my site, but am using a percentage based sidebar which looks awful.
Here is a JSfiddle recreating in basic terms the theme from above:
http://jsfiddle.net/Uyv6w/4/
All i am after is to make that grey inner div always remain centered inside the red content div.
Incase JSFiddle goes down and for future ref:
HTML:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
CSS:
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
width: 100%;
}
#sidebar {
height: 100%;
width: 100px;
background-color: #9b59b6;
position: fixed;
}
#content {
width: 100%;
background-color: #f00;
}
#inner {
width: 60%;
margin-left: 150px;
background-color: #888;
height: 1000px;
}
Thanks.
There are just 2 properties to change in ordre to make this work the way you want :
#content {
/* width: 100%; */
margin-left: 100px; /* the width of you sidebar.
Since #content is a div, a block-level element
, its width will be automatically 100%
, minus the margins */
background-color: #f00;
}
#inner {
width: 60%;
/* margin-left: 150px; */
margin-left: auto;
margin-right: auto; /* having margin-left & right set to auto will center your div.
you could also use "margin: 0 auto" */
background-color: #888;
height: 1000px;
}
I have updated you JSFiddle example here : http://jsfiddle.net/Uyv6w/5/
http://jsbin.com/requv/1/edit
if you set body, html (and the container) to height 100%, it will not be able to to scroll.
the height should be more then 100%.
So I have a script I found that allows me to hide a div within an outer div. When the outer div is hovered over the inner div appears. However both the outer and inner div are set to 100% width in CSS and without the script they work properly, spannning the entire width of the screen. With the script they span to only the min-width I set.
This is meant to be a menu bar that spans the entire width of the site at the very top.
I'm wondering if anyone knows a solution to get the div back to the full width of the screen? Hoping it's something simple I missed.
<div id="menu_outer_wrapper"
onmouseover="document.getElementById('menu_strip_wrapper')
.style.visibility = 'visible';"
onmouseout="document.getElementById('menu_strip_wrapper')
.style.visibility = 'hidden';">
And here is my CSS:
#menu_outer_wrapper {
height: 40px:
width: 100%;
float: left;
position: relative;
min-width: 800px;
}
#menu_strip_wrapper {
height: 40px;
width: 100%;
min-width: 800px;
background: #f1f1f2;
border-bottom: 1px solid #ccc;
position: relative;
float: left;
font-size: 1.3em;
}
Change : to ; and see if it will work.
#menu_outer_wrapper { height: 40px: }
jsfiddle.net/7maCW/