How to divide the height of an element on 3 elements? - javascript

I have the following html code:
body, html {
height: 100%;
}
.parent {
width: 15%;
height: -webkit-fill-available
}
.child {
height: 33.33%
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I tried the display:table for "parent" & display:table-row for "child" , but it didn't work.
Is it possible to do it?

I suggest to use flexbox, and don't forget to set .parent to height:100%.
The main advantages of using flexbox:
You don't have to deal with overflow problem, say there is more content in one row that couldn't fit 1/3 of the entire container height, it will simply expand the row automatically, and all the remaining free space will still be evenly distributed.
You can easily add or remove a row without changing the CSS, they will be evenly distributed based on the number or child divs.
If you need one or more rows to be shorter or taller, you can just use flex or flex-grow or flex-basis to adjust accordingly.
Plus, if you haven't heard of flexbox yet, you'll be amazed how powerful it is once you entered the flexbox world.
html,
body {
height: 100%;
margin: 0;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
}
.child {
flex: 1;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

Apply height: 100%; and margin: 0; (to reset the default margin) to html and body, then 100% height for the parent and 33.33% for the children. No flex or table needed...
The main important thing is that the parent needs a defined height for the percentage values of the children to become effective. And if that parent height is a percentage value, also the parent of the parent needs a defined height. If you only use percentages, that goes up to body and html
body,
html {
height: 100%;
margin: 0;
}
.parent {
width: 15%;
height: 100%;
}
.child {
height: 33.33%;
background: #fa0;
}
.child:first-child {
background: #0fa;
}
.child:last-child {
background: #af0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Your code is working, just put min-width to see it in action.
<html>
<head>
<style>
.parent{
height:100%;
}
.child{
height:32%;
border:1px solid black;
min-width: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>

Related

How to prevent element from scrolling

I have a div container having 4 divs each of height 100vh so it makes the container of 400vh.
So, what I want is to stop the scrolling in that particular container while not making them hidden because I want to redirect to them one by one.
It's simply like : .container{scroll: do nothing}
No problem with javascript as well...
let parent = document.getElementsByClassName("parent")[0];
parent.addEventListener('mousewheel',(event) => {
event.preventDefault();
});
.parent {
overflow: auto;
border: 2px solid;
height: 300px;
}
.child{
height: 100vh;
background: yellow;
margin-bottom: 20px;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Make CSS Max Width the width of an individual element?

I am trying to make a whole div's max width property the width of one element inside of it, how would I be able to do this? Or would I not be able to do this at all.
This is an example use case:
<div class="max-w-[610px]">
<div class="mt-12 mb-12">
<p class="mb-8">With RepoZoid, storing your own code is as easy as pie. Just add a new entry, paste your
code in - and you're off to the races.</p>
<p>It's as simple as 1, 2, 3 - with sharing options and more coming in the future!</p>
</div>
<div class="flex flex-row mb-3">
<div class="grow">
<input class="w-full text-[#9c9ea5] py-3 px-4 rounded-md" placeholder="Enter your email" type="email"
name="emailinput">
</div>
<div class="pl-2">
<button class="px-4 h-full rounded-md bg-[#6E6BFF] text-white">Sign Up to the Beta</button>
</div>
</div>
I'm not that familiar with Tailwind, but I'll give you a solution in Pure HTML/CSS.
.parent {
padding: 10px;
background: yellowgreen;
display: flex;
/* Add `flex-direction: column;` if you want each child to be in one-row */
width: fit-content;
}
.child {
width: 100px;
height: 50px;
}
.child:nth-child(1) {
background: red;
}
.child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
If you don't want to use fit-content, you can just use display: inline-block; and remove the width from your parent as follows:
.parent {
padding: 10px;
background: yellowgreen;
display: inline-block;
}
.child {
display: inline-block; /* Make it `display: block;` if you want each child to be in one-row */
width: 100px;
height: 50px;
}
.child:nth-child(1) {
background: red;
}
.child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
Additionally, I would quote a comment by #voneiden in a similar question;
A block element will claim the horizontal space that the parent has to offer whereas an inline-block will take the horizontal space it needs to display the content (unless overridden). If the inline-block is bigger than the parent, it will overflow. You can make a block element to evaluate content width by setting width: fit-content however that is not IE compatible.

How can I make a container div the same width as it's floating children and center it when there are multiple rows of floating children?

I have a container div with multiple floating child divs. Each child has the same width, but the size of the row varies based on screen width. I want the container to only be the width of its children and also be centered, all dynamically depending on screen size. This post explains a similar problem:
Container div changes width when a second row of floating children is added
Here is a fiddle that also explains the issue:
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
http://jsfiddle.net/LxLjv3tm/1/
Here is another stackoverflow post that solves the issue for one row:
Having the floating children elements determine parent width
(the issue is there are enough floating children to make multiple rows)
It looks like jQuery is the answer. In order to "dynamically" set the width of the container div, we need to calculate the width on a screen resize event via jQuery. We can use the width of the window and the width of the children to calculate the width of the inner container.
Here is the fiddle:
var resizeContainerDiv = function() {
var screenWidth = $(window).width();
var childWidth = $(".child").outerWidth();
var innerContainerWidth = Math.floor(screenWidth / childWidth) * childWidth;
$('.container').css('width', innerContainerWidth);
}
$(window).on("load", resizeContainerDiv);
$(window).on("resize", resizeContainerDiv).resize();
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
https://jsfiddle.net/02arvnLx/1/

How do I center a div in another div?

<div id="container">
<div id="div1">
<div id="div2"></div>
</div>
</div>
I want div 2 to be in the center of div1 no matter what, no matther how much the div2 width changes. Atm the div2 only get centered of the containers width.
How can I do this? Is JS the last way to go?
CSS flexbox does this with the justify-content and align-items attributes.
Style a class named something like bullseye as:
.bullseye {
display: flex;
justify-content: center;
align-items: center;
}
Then add the class to your div1 element:
<div id=container>
<div id=div1 class=bullseye>
<div id=div2>
This box is centered<br>
horizontally and vertically.
</div>
</div>
</div>
Fiddle with it:
https://jsfiddle.net/1rd6tcra/
Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
You give the outer div a width and the inner one you give margin 0 auto.
#container{
width: 100px;
}
#div1{
margin: 0 auto;
}
check this code below
<div id="container">
<div id="div1" style="width:100%;border:1px solid #F00;">
<div id="div2" style="width:60%;border:1px solid #F0F;">
here is my div2
</div>
</div>
</div>
make sure that your inner div has a certain width and it doesn't matter whatever the width of parent.
the css code is below
#div2{
margin:auto;
}
you can check this fiddle
The modern way to do this is:
#div1 {
position: relative:
}
#div2 {
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}

Fill remaining space if other element display none

I have a div with other 3 divs inside.
<div id="buttons">
<div id="button1"></div>
<div id="button2"></div>
<div id="button3"></div>
</div>
The width of the main div (buttons) is 100%. If my 3 buttons are visible the width of each button will be 33%, if 2 are visible will be 50% and if only one so 100% the same of the parent...
I know how to modify this values with javascript... but its possible modify only with javascript the display and css modify the width
SORRY BY MY ENGLISH
You can achieve that layout using table & table-cell props, OR via flexbox (or maybe some other methods, but these ones come in mind atm).
Both these methods have pros & cons, but depending on what you're going with you're layout, these should help you out.
According to http://caniuse.com/, flexbox doesnt go to well with older browsers, mainly IE9 and bellow that, check it out: http://caniuse.com/#search=flex
As for the table trick, it has a much better support with older browsers, http://caniuse.com/#search=table, but it has its own little quirks depending on what you want to accomplish using this.
Option 1 - Table Trick:
set the container to display: table & width: yourwidth;
set the children of the container to display: table-cell, this rule will make sure theyll stretch evenly across their parent
done.
View demo here or snippet bellow:
/*option 1*/
.buttons {
display: table;
width: 100%;
}
.buttons > div {
display: table-cell;
}
/*styling purposes*/
.buttons{
margin: 10px 0;
text-align: center;
}
#button1{
background: red;
}
#button2{
background: green;
}
#button3{
background: cyan;
}
<h1>Table trick</h1>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
<div id="button3">3</div>
</div>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
</div>
<div class="buttons">
<div id="button3">3</div>
</div>
Option 2 - Flexbox:
set the container to display: flex
set the childrent to flex: 1 100% so that theyll stretch evenly across their parent
View demo here or snippet bellow:
.buttons-flex {
display: flex;
}
.buttons-flex > div {
flex: 1 100%;
}
/*styling purposes*/
.buttons-flex {
margin: 10px 0;
text-align: center;
}
#button4 {
background: red;
}
#button5 {
background: green;
}
#button6 {
background: cyan;
}
<h1>Flexbox trick</h1>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
<div id="button6">3</div>
</div>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
</div>
<div class="buttons-flex">
<div id="button6">3</div>
</div>
Hope this help you out!
Try using the following CSS...
<style type="text/css">
#buttons
{
width:100%;
display:table;
}
#button1
{
background:red;
width:34%;
display:table-cell;
}
#button2
{
background:green;
width:34%;
display:table-cell;
}
#button3
{
background:blue;
width:34%;
display:table-cell;
}
</style>
As the buttons are hidden, the remaining buttons take up the remaining space of the #buttons container.
Think of this as displaying a set of tds in a table

Categories