Here is my HTML structure:
.parent{
background-color:#f7f7f7;
width: 100px;
height: 100px;
border:2px solid;
}
.child{
height: 100%;
width: 100%;
background-color:#cf5;
padding: 15px;
}
<div class="parent">
<div class="child">something</div>
</div>
As you see div.child goes out of div.parent. That's because of padding: 15px;. Well, how can I calculate this in CSS:
.child{
height: (100% - the number of padding);
width: (100% - the number of padding);
}
So this is expected result: (noted that there also should be padding: 15px)
Just add box-sizing: border-box to the child element.
.parent {
background-color: #f7f7f7;
width: 100px;
height: 100px;
border: 2px solid;
}
.child {
height: 100%;
width: 100%;
background-color: #cf5;
padding: 15px;
box-sizing: border-box; /* NEW */
}
<div class="parent">
<div class="child">something</div>
</div>
The CSS box-sizing property has an initial value of content-box. This means the box model calculates total width by adding the content plus padding plus borders. The calculation is similar for height.
With border-box, the box model includes padding and borders in the width / height calculation.
(Note that margins are always outside the calculation; they will be appended whether in content-box or border-box.)
A second possibility (arguably less efficient than box-sizing) would be the CSS calc function:
.parent {
background-color: #f7f7f7;
width: 100px;
height: 100px;
border: 2px solid;
}
.child {
height: calc(100% - 30px); /* NEW */
width: calc(100% - 30px); /* NEW */
background-color: #cf5;
padding: 15px;
}
<div class="parent">
<div class="child">something</div>
</div>
Use a margin instead:
.child{
height: 100%;
width: 100%;
background-color:#cf5;
margin: 15px;
}
Just set the width, height, and margin in the child class. The parent class is just the wrapper it only needs styles that are specific to it. i.e. The background color and the border.
.parent{
background-color:#f7f7f7;
border:2px solid;
}
.child{
height: 100px;
width: 100px;
background-color:#cf5;
padding: 15px;
}
The child class pushes out of the parent because you set its dimensions to be fixed and the child to 100% of that. You then set the padding which push the child out of the parent.
Related
I'm trying to develop a mini game where you click the Dot and the Position will be randomly generated and the size of the Dot will shrink the more you click it. The border can also be scalable depending from its device.
Any suggestion/Ideas in how can I scale the Dot within the borders without going over the line?
Here is my simple code:
.Box{
position: relative;
box-sizing: border-box;
border: 1px solid black ;
height: 700px;
width: auto;
margin: 2%;
padding: 0px;
}
.Dot{
position: absolute;
background-color:red;
border-radius: 50%;
width: 20px;
height: 50px;
left: 5px;
top: 96%;
}
<html>
<body>
<div class="Box">
<div class="Dot"></div>
</div>
</body>
</html>
If your dot is 50px tall and wide you can put a padding of half of the size around the main box, in this case it'll be 25px of padding.
Then you can add another div inside the box which will be 100% of the box's height and width, set it's position as a relative and have the dot move inside the inner container.
As long you keep consistently the size of the dot and padding of the box half of the dot size the dot will never overflow outside its parent containers.
*, *::before, *::after {
box-sizing: border-box;
}
.Box{
border: 1px solid black;
height: 700px;
width: auto;
margin: 2%;
padding: 25px;
}
.Inner{
position: relative;
height: 100%;
width: 100%;
}
.Dot{
position: absolute;
background-color:red;
border-radius: 50%;
width: 50px;
height: 50px;
left: 5px;
top: 96%;
}
<html>
<body>
<div class="Box">
<div class="Inner">
<div class="Dot"></div>
</div>
</div>
</body>
</html>
I'm trying to make a child div of a Flexbox container with overflowing-x content have 100% of the width WITH the overflow, but I can't figure out it, have made several searches and couldn't find a solution;
Can someone help me?
Fiddle: https://codepen.io/joaovtrc/pen/MWaaxKr
HTML:
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
CSS:
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: fit-content;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
I want the 'test-item-2' (the one with the blue background) div to match the red one in width, but, keep in mind that the content on the redbox might not be exactly the same everytime, so no calc(100% + x) with fixed params...
As you have set the width: fit-content; for the overflow div, it makes the width uncontrollable as it grows with more content in that div. one solution might be to change the width: 100%; and add overflow-x: scroll to the class .test-item-overflow. (see the change in the below snippet)
However, if you want to keep the width: fit-content; for the red div and change the blue div's width along with the red one (depending on the content) you can add: document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px". (in this case it's better to define id for the divs and use getElementById in the js code)
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: 100%;
overflow-x: scroll;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="test-item-2"></div>
</div>
So I really recommend you go ahead and add the following lines
Margin:0px;
This will take away all the space between your content and browser
Padding:0px;
This will take away all the space between your content and content border
Overflow:hidden;
Finally this should remove overflown content.
Hope that helped!
Better to use display:grid; on .test-container. After if you dont want to have gap between to the 2 cells, this is due to .test-container { height: 500px; }.
DEMO:
html body {
width: 100vw;
height: 100vh;
margin: 0px;
overflow: auto;
display: flex;
align-items: center;
background: grey;
}
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
/*display: flex;
flex-direction: column;*/
display:grid;
overflow-x: auto;
}
.test-item-overflow {
width: 1500px;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
How to style this div both with a min-width and width
css
#diva {
position: relative;
margin: 0 auto;
min-width: 75px;
width: auto;
height: 50px;
padding: 4px;
color: white;
background-color: red;
}
html
<div id="diva">
hello
</div>
When i set width to auto, this div occupies the full page width.
display:inline-block;
Just add display:inline-block; to the styles for the div. That should work :)
http://jsfiddle.net/432kxywu/
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
I have 2 divs:
A header div at the top of the page with a set height of 150px.
A container div sitting under the header div.
What I would like is for the container div to be dynamic and resize to 100% of the remaining space underneath the header div.
I have tried putting in height: 100% but this makes the page need to scroll. I presume it is making the div 100% of the browser height rather than 100% of the remaining body's height.
How can I make it so that the container div simply resizes its height to the remaining body space?
Please find the relevant code below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: 100%;
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>
You can simply do that by using some math with the calc() CSS function. Subtract 150px (the header size) from 100%. This is dynamically calculated.
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
Compatibility: calc() is supported in most modern browsers and IE 9 +
Example fiddle and snippet below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>
I think the correct modern way to acomplish this without css hacks is with FlexBox, which as of the writting of this post is supported by all modern browsers. (you can check browser compatibility here)
It also gives you more flexibility. If you later decide to add new rows (or even side columns) is very easy to acomplish without any calculations.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex; /* Activates FlexBox Model */
flex-direction: column; /* Divs are spanned vertically */
width: 100%;
height: 100%;
}
#header {
background-color: #ccc;
height: 150px;
}
#content {
background-color: #888;
flex-grow: 1;
}
<div id="container">
<div id="header">My header with some stuff</div>
<div id="content">My content</div>
</div>
The outer container has to have position: relative and the div that you want to stretch to the bottom has to have position: absolute. This solution is pure css with no calls to calc().
body, html {
margin: 0;
height: 100%;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#header {
height: 150px;
width: 100%;
background-color: #999999;
}
#mainContent {
width: 760px;
top: 150px;
bottom: 0;
right: 0;
left: 0;
background-color: #CCCCCC;
margin: 0 auto;
position: absolute;
}
JSFiddle: http://jsfiddle.net/wt0k73bz/