We Keep Coding

Clip div also clip the scroll

I have two divs whitch the div child is inside of the div parent. The div child is bigger that his parent. So I decide to put a scroll in the div parent for i can see better the content of the div child.
The problem is that now I need to use the property clip in the parent div, but the clip also affects the scroll.
What I would like to ask if there is any way that I could clip the parent div and the scroll size ajdustes automaclty to the scroll.
Follows my code:
.outter{
width:100px;
height:100px;
background-color:blue;
overflow: scroll;
position: absolute;
clip: rect(23.75px 120px 120px 23.75px);
}
.inner{
width:200px;
height:200px;
background-color:red;
}
<div class="outter">
<div class="inner"></div>
</div>
[EDIT]:
Follows thee result that i pretend.
If you campare the image above and the result of the snippet that I put above is that in the result the scrolls apears cut and the image is not

That is what the clip property is supposed to do, restrict the visible area of an element. If you are trying to clip the contents of the inner element, you can absolutely position it to do so.
Hope this helps!
.outter {
position: relative;
width:160px;
height:160px;
background-color:red;
overflow: scroll;
}
.inner{
position: absolute;
left: -40px;
top: -40px;
background:url('http://placekitten.com/g/400/400');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width:400px;
height:400px;
}
<div class="outter">
<div class="inner">
</div>
</div>

React page keep footer at the bottom of the page

I have a problem when try to fix footer at bottom of the page as below picture:
Although I google and see many suggestions, but I'm still facing the problem. I suspect this problem is <div data-reactroot></div> cannot be set height 100% as its parents. Could anyone help me?
Thanks in advance!
Update:
Style of footer:
borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'

You need to tell your footer to position itself to the bottom of the surrounding container:
Footer css:
position:absolute;
left:0;
bottom:0;
right:0;
And for the container (the react-root div):
padding-bottom:60px;
As an alternative (if you don't need to support IE 8) you could try this style on the div.container :
height: calc(100% - 60px);

For any other person the above solutions do not work for, you could try the following steps:
Give the parent div a non-static position such as relative (remember the default position is static)
Give the parent div a minimum height of 100vh; this enables it to take up all available space vertically
Then for the footer (child), which should be wrapped in a div if not one, give it the following properties; position: absolute; bottom: 0; width: 100%.
UPDATE: In some cases, setting the footer div position to absolute may not work. In such a case, use relative instead.
Hopefully, the steps above should fix it :-)

It is important to have content wrapper and set its min-height to 100vh:
min-height: 100vh; (100% of the viewport height)
min-height: 100%; (100% of the parent's element height)
Look at here is very well explained and worked for me:
https://medium.com/#zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551

One trick I believe everyone is missing here is that in React after html and body element, there is also a div with #root which encloses the entire content. Please refer to the image below.
So, it is required to make the height 100% of all 3 i.e. html, body and #root.
html, body, #root {
height: 100%;
}
Then add these properties in #root:
#root {
display: flex;
flex-direction: column;
}
You must wonder that why this the #root needs to be flex and not the body. The reason is that it is the innermost parent or I should say the closest parent of the footer.
Now, finally just do this for the footer:
footer: { margin-top: auto }
What the above line does is it pushes the footer at the end of its parent.
As simple as that. Nothing fancy here. No need to do any calc on height or change the position of footer.

I would change the footer css as follows:
position: fixed;
left:0;
bottom:0;
right:0;
It is possible to have a position: absolute but it won't be scrolling-friendly.

flex-grow
Quite late to the party but my solution was:
<div className="layout">
<Navbar />
<main>
{children}
</main>
<Footer />
</div>
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.layout main {
flex-grow: 1;
}

Are you trying to have a wrapper for your page so you can absolutely position the footer at the bottom? If so, you can create a new component with relative position for that and pass the others in as children and give your footer absolute positioning at the bottom.

Wish I read it earlier.
Here is the snippet for Ikechuk answer and note that now the footer also respect the margin (which may not in any other answers above):
html, body, div{
height:100%;
width:100%
display:block;
}
footer{
position:absolute;
bottom:0;
display:block;
width:100%
}
hr{
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
border-style: inset;
border-width: 1px;
}
<html>
<body>
<div style={"margin=5%;"}>
<div style={"position:relative"}>
<footer>
<hr>
I am footer
</footer>
</div>
</div>
</body>
</html>

Thank you, #mwoelk had the question answered. I just would like to make it clearer for the beginner.
Step 1 --- Footer css:
.Footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
Step 2 --- Wraper of Footer css: (Let's use React as an example, usually footer is wrapped inside .App. The reason for adding padding bottom is to avoid some part of the content is covered by Footer at the bottom if content is too long.)
.App {
padding-bottom: 60px;
}

How to dynicamlly center the center of a div based on screen size

I really thought this would be simple but i'm losing my mind! I just simple want to center a div in the div of the screen. But not that top left of the div to the center of the screen but the center of the div in the center.
Here is my div css
.box
{
padding-top:20px;
padding-left:5px;
background-color: #ffffff;
background-color: rgba(221,221,221,0.5);
border: 1px solid black;
border-radius: 25px;
filter: alpha(opacity=90);
height: 125px;
width: 250px;
z-index: 1;
}
<form id="form1" runat="server">
<div id="box"><div>
</form>
Thanks! I couldnt figure out how to get the html to side in a code block. This is center horizontally and vertically.

Use position:absolute if you need it centred both horizontally and vertically:
#box {
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
/* etc */
}
http://jsfiddle.net/wcFMw/

To center horizontally:
margin:auto;
To center vertically:
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
You could also use position: fixed to make the div centered even when scrolling the page.
Also note that you'll have to use # instead of . to select by id. . is the CSS selector used for class.
JsFiddle

margin:0 auto;
Add this property to your css class.

Can I use `overflow: scroll` on a div with variable height?

Is it possible to use overflow: scroll on a div that has height set to auto?
I have a div with an unordered list inside of it. The amount of items in the list is variable so there is no way I can use a fixed height. The div that contains the unordered list is where the scrollbars need to be, here is my code:
#page {
height: auto; /* default */
overflow-y: scroll;
overflow-x: hidden;
}
As stated, the unordered list is contained within the #page div. The height of the page is assigned by the unordered list's value. Is there a way to make overflow: scroll work on a div with variable height like this or must I use JavaScript to do this?
Thanks

One way of approaching this design...
Suppose that you have the following HTML:
<div class="main">
<div class="inner">
<ul>
<li>Some list items...</li>
...
</ul>
</div>
</div>
The .main block is fitted to the page, for example, by absolute positioning:
.main {
border: 2px dashed blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
The .inner block holds the navigation list that can cause scrolling:
.inner {
border: 2px dotted red;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
overflow-y: scroll;
}
In this example, I constrain the height of the .inner block to fit within .main,
and set overflow-y: scroll, which creates a scroll bar contained within the edges
of the container block.
You may have to adapt this to your mobile platform, but the concept should still apply.
Demo fiddle: http://jsfiddle.net/audetwebdesign/ac4xT/

Simply put, if it has variable height (auto), it will never have overflow in the y axis (vertically), because the div will always grow to fit its contents.
overflow: scroll will force it to present a scrollbar, but it will always be disabled, because the contents will never extend beyond the displayed pane.
If you want vertical scrolling, you have to define a height, either in px, %, or em.
If you do height: 100%, the div will fill the height of the page, and scroll content that extends beyond the window's viewport height.
If you have a header area, try something like this:
body {
margin: 0;
}
#header {
position: absolute;
width: 100%;
height: 40%;
background-color: #ccc;
}
#body {
position: absolute;
top: 40%;
width: 100%;
height: 60%;
overflow-y: auto;
background-color: #eee;
}
<body>
<div id="header">
<p>Header</p>
</div>
<div id="body">
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
</div>
</body>
For a fixed-height header (per the comments), use absolute positioning with a top and botom value to position the scrollable div below it:
body {
margin: 0;
}
#header {
position: absolute;
width: 100%;
height: 60px;
background-color: #ccc;
}
#body {
position: absolute;
top: 60px;
bottom: 0px;
width: 100%;
overflow-y: auto;
background-color: #eee;
}
<body>
<div id="header">
<p>Header</p>
</div>
<div id="body">
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
<p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
</div>
</body>

Why not use max-height on the div?
max-height sets the maximum height to which an element can expand. I suppose what you want is the div to never go out of the screen. So you can set a max-height and then overflow: auto;

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/

To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?

If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO

try ..
$backWidth=$(window).width();
$backHeight=$(window).height();

As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>