This is the code:
<div class="c1">
<div class="c2">
<div class="c3">
</div>
</div>
</div>
<style>
.c1{
overflow-y: scroll;
overflow-x: visible;
margin: 50px;
width: 500px;
height: 300px;
background-color: red;
}
.c2{
width: 200px;
height: 1000px;
background-color: yellow;
}
.c3{
margin-left: -50%;
width: 200px;
height: 100px;
background-color: red;
}
</style>
What I'm trying to achieve is have scroll functionality for the y-axis while having the green div exceed the other to the left, like it would if overflow-y is unset for the red div. Is this possible at all? Here is the code to test: https://liveweave.com/RCeADH
Related
In the snippet below you can see that the green .bottom stops at the width of the screen using a width of 100%. Can I force the width to match exactly the parent width? In this case 1000px.
The problem is that the red .top is a variable width so setting a fixed width for the green .bottom is not an option.
.parent {
width: 700px;
}
div.container {
overflow: auto;
background-color: yellow;
display: flex;
flex-direction: column;
height: 100px;
}
div.top {
background-color: red;
height: 40px;
width: 1000px;
}
div.bottom {
background-color: green;
height: 20px;
width: 100%;
}
<div class="parent">
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
Use CSS grid instead of flexbox:
.parent {
width: 700px;
}
div.container {
overflow: auto;
background-color: yellow;
display: grid;
align-content: start; /* don't forget this */
height: 100px;
}
div.top {
background-color: red;
height: 40px;
width: 1000px;
}
div.bottom {
background-color: green;
height: 20px;
}
<div class="parent">
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
Could you please explain me the CSS in this code, I mean how horizontal scrolling output came?
body {
margin: 0;
}
<div style="max-width: 200vw; height: 100vh; overflow-x: scroll">
<div class="parent" style="width: 200vw; height: 100vw">
<div class="child" style="float: left; width: 100vw; height: 100vh">Hi</div>
<div class="child" style="float: right; width: 100vw; height: 100vh">
Hi
</div>
</div>
</div>
As you can see in the below snippet, I have 2 div's.
A parent and a child.
Parent has width 200px, while child has 300px, so obviously the child will overflow. So in order to avoid overflowing, we have provided overflow-x: scroll
.parent {
max-width: 200px;
overflow-x: scroll;
padding: 10px;
border: 1px solid #ddd;
}
.child {
width: 300px;
padding: 10px;
background-color: blue;
}
<div class='parent'>
<div class='child'>
</div>
</div>
I have here some code
.container{
height: 200px;
width: 100%;
background-color: black;
}
.container_1{
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
<div class="container_1">
</div>
<div class="container">
</div>
If you scroll to right side, the .container stopped. But I gave him a with of 100%, why it won't work?
It is 100% of its parent, which is the body. The body didn't get an explicit width, so it's just as wide as the client size of the window. The other div is forced to be wider (20000px), so it extends outside of the bounds of the body.
In the snippet below, I've added a border to the body, so you can see how the second div snugly fits into that boundary.
.container {
height: 200px;
width: 100%;
background-color: black;
opacity: 0.5;
}
.container_1 {
opacity: 0.5;
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
body {
border: 3px solid red;
}
<div class="container_1">
</div>
<div class="container">
</div>
Because its 100% of the view port
Try this,
.main_container{
float:left;
}
.container{
height: 200px;
width: 100%;
background-color: black;
}
.container_1{
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
<div class="main_container">
<div class="container_1">
</div>
<div class="container">
</div>
</div>
Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?
I need a fixed header under which the content (body) can scroll. This header should be 100% of the parent, but the parent has some margin-right. The fixed header gets 100% width of the window instead of the parent.
How can this be fixed?
Example:
http://jsfiddle.net/4u0c85k8/
HTML
<div id="parent">
<div id="child">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
</div>
</div>
</div>
CSS
#parent {
width: 100%;
border: solid 1px black;
}
#child {
background-color: lightgray;
margin: 0 8px;
width: auto;
}
#header {
position: fixed;
height: 28px;
top: 17px;
background-color: lightgreen;
width: 100%;
}
#content {
margin-top: 36px;
height: 1000px;
}
If you change width: 100% for this css:
right:0px;
left: 0px;
margin-left:17px;
margin-right:15px;
it works but i dont think its the best solution.