Here is the snippet:
#bar {
height: 30px;
width: 100%;
background-color: red;
}
#content {
width: 1000px;
}
<div style="width: 300px; height: 200px; overflow: auto;">
<div id="bar"></div>
<div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
When I put 2 div ("bar", "content") inside a parent div and I set parent div to fixed width and height and overflow is auto to enable scroll bar. Then set "content"'s width larger than its' parent' width and "bar"'s width to 100%.
It turn out "bar"'s width will be same as its' parent, not its' sibling "content".
Thus when you scroll it, "bar" will scroll together instead of keep there...
Is any solution we can keep "bar" on the top or set it to 100% width as its' sibling "content" div?
Thank you!
Maybe you can wrap the content in a scroll wrapper, instead of the outer box.
See code below:
#parentBox {
width: 300px;
height: 200px;
border: 1px dashed grey;
}
#bar {
height: 30px;
width: 100%;
background-color: red;
}
#content {
width: 1000px;
}
.scrollWrapper {
width: 100%;
overflow: auto;
}
<div id="parentBox">
<div id="bar"></div>
<div class="scrollWrapper">
<div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</div>
Sure, using a little bit of hackery. Since this is a display-only div you might as well take it out of the document flow. As a bonus, this makes your HTML more semantically correct!
What we're doing is setting your content to have a width that's known to the browser (using the display:inline-block; property – Blocks have layout, inlines don't). Then, we create a pseudo :before element to show your header and let it fill the layout that we just gave to your content.
#content:before {
height: 30px;
content: '';
background-color: red;
display:block;
}
#content {
display: inline-block;
}
<div style="width: 300px; height: 200px; overflow: auto;">
<div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
Related
I have tried a lot of things and searched online but I cannot figure out the solution to this problem.
I have a div container which has a max-height, min-height and also overflow: auto. When the inner content is larger than the max-height, a scrollbar appears as expected. But, inside the content there is a dropdown, which when clicked, the menu expands, and instead of being displayed outside the parent container, it is like changing the inner content height.
The only solution I found online and made sense to me, is to wrap the container to div with relative positioning and make the dropdown absolute, but there is a big drawback now, the dropdown stays fixed on scroll, as it is absolute positioned relative to the wrapper and not the content. Is there any common way to fix this or any other solution ?
I didn't post any code because I do not want the answer to rely on my code.
I just want a minimal example if possible with these properties:
Container has a max-height
If content is larger than the container's max-height then the container should display a scrollbar.
The content has a dropdown which should scroll with every other element of the content.
The menu options of the dropdown element are escaping the container / are displayed outside the boundaries of the container.
To illustrate on my comments on the question, here's an MCVE:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
position: relative;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
left: 300px;
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
As you can see, with absolute positioning based on the relative position of div.content the orange div.dropdown creates a horizontal overflow, which is what you don't want. To fix this scenario, you need to remove position: relative from div.content and use transform: translateX(300px); instead of left: 300px;:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
transform: translateX(300px);
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
I need a container with a fixed width, and an element inside it that can scroll within that fixed width. The catch is that I need the content that goes beyond the bounds of the fixed width container to be visible. Does anyone know how to achieve this?
Codepen of the situation I'm describing: https://codepen.io/anon/pen/zyZOjM
.outer {
background: red;
width: 400px;
height: 800px;
}
.inner {
background: blue;
max-width: 200px;
margin: auto;
overflow-x: scroll;
height: 300px;
color: white;
}
.element {
background: green;
width: 800px;
height: 100px;
}
<div class="outer">
<div class="inner">
<div class="element">Initially, this element should overflow all the way off the edge of the red (exactly how it does when overflow is set to visible). It should be scrollable, though (how it is when overflow is set to scroll) and when you scroll all the way to the right,
the right of the green should end at the same place is does now (right edge of the blue).</div>
</div>
</div>
I'm pretty stumped. This could have a simple solution but I've been pulling my hair out a bit.
Is this what want to achieve?
.container1 {
background: red;
width:400px;
height:800px;
}
.doop1 {
background:blue;
max-width: 200px;
margin:auto;
overflow: auto;
height:300px;
overflow-Y: hiddden;
}
.doop2 {
background:green;
width:800px;
height:100px;
}
#overflow-text{
display: block;
width: 190px;
position:fixed;
}
<div class="container1">
<div class="doop1">
<div class="doop2">
<p id="overflow-text">
Initially, this element should overflow all the way to the edge of the red. When you scroll all the way to the right, the green should end at the same place is does now (edge of the blue).
</p>
</div>
</div>
</div>
This is my Three divs.
<div class="header">
<div>#ViewBag.Title</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
This is my CSS.
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header
{
height: 10%;
width: 100%;
background-color: whitesmoke;
text-align: center;
}
.content
{
height: 80%;
width: 100%;
background-color: white;
}
.footer
{
height: 10%;
width: 100%;
background-color: whitesmoke;
}
</style>
Now I want that the child div inside my parent Header div will be flexible. Whenever i change my browser size the child div inside the parent header div will also get resized according to my browser size. And will stay inside the header div. Please help.
.header div
{
height: 100%;
width: 100%;
}
Use this for child div.
If set a child div's width is 50%. It filled in 50% of it's parent.
Do not set a height for the header element!
When dealing with responsive design, I try to avoid setting a height whenever possible. If you really need to set a height, do so on the child element, which then forces the header to have the height of its child.
use this in ur css
display-inline:block:
Is there any solution without JS?
html
<div class="wrapper">
<div class="fix"></div>
</div>
css
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
width: inherit;
height: 20px;
position:fixed;
background: black;
}
I cant add any other styles for .wrapper except width: 100%;.
I try with width: inherit but it doesn't work for me because of I have parent div with only max-width. source
Here is JsFiddle Demo
A position:fixed element is not relative to its parent anymore. It respects only the viewport's boudaries.
MDN Definition:
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So any width, max-width, or whatever property will not be respected by the fixed element.
EDIT
In fact, it won't inherit the width because there's no width property defined on the wrapper.. So, try setting the child as width: 100% and inherit the max-width:
http://jsfiddle.net/mx6anLuu/2/
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
max-width: inherit;
width: 100%;
height: 20px;
position:fixed;
background: black;
}
there is already a width on the column, just set the width of the fixed element to inherit. no reason to complicate things.
CSS:
.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }
HTML:
<div class="col-sm-3">
<div class="fixed-in-div">
...
</div>
</div>
It seems there is no solution without JS.
This blog post by Felipe Tadeo explains why:
https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied
It explains the confusion around width: inherit
"Fixed positions itself relative to the viewport... whenever you inherit width (with position fixed) it will be with respect to the viewport"
I have a website on which I want to have 3 independently scrollable <div> elements.
The html code is this:
<div class="sidebar">Content</div>
<div id="window">Some very long content</div>
<div class="sidebar">More content</div>
The associated css is this:
body {
overflow: hidden;
}
#window {
font-family: monospace;
overflow: auto;
width: 70%;
float: left;
height: 100%;
}
.sidebar {
overflow: auto;
width: 15%;
float: left;
height: 100%;
}
From what I saw via searching the internet, this is supposed to work. But I don't see any scrollbars at all.
Why?
How can i fix this issue?
height: 100% as a percentage only affects the height of the element if that element's parent has an explicit height. The height of the body tag by default is the height of the content, not the full height of the window.
Try adding this:
html, body { height: 100%; }
Because of your height: 100%; your divs will just adjust to the height of the text. By changing your height to for example: 250px your code will work.
Hope this helps. :)