could you please tell me how to increase div height using javascript on button click ?
I have two div's (one is yellow background-color and another is white background-color).
On button click I want to increase the height of white box. but when I click on button it increase the height of yellow as well as white box ?
why yellow div increase it's height when I click on button ..i want it height remain same after button click
here is my code
function abc() {
document.querySelector(".content").style.height = "300px";
}
.abc {
width: 80%;
margin: auto;
display: grid;
grid-template-columns: repeat(10, [col-start] 1fr);
grid-template-rows: repeat(8, [row-start] 1fr);
padding-top: 3.4em;
padding-bottom: 3.4em;
}
.img {
grid-column: col-start / span 8;
grid-row: row-start / span 6;
background-size: cover;
max-width: 1074px;
background-color: #ee0;
}
.content {
grid-column: col-start 6 / span 6;
grid-row: row-start 2 / span 6;
background: #fff;
min-height: 100px;
border: 1px solid blue;
padding: 3em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="parent">
<div class="abc">
<div class="img"></div>
<div class="content"></div>
</div>
</div>
<button onclick="abc()">click</button>
</body>
</html>
https://codesandbox.io/s/still-lake-lw07u?file=/index.html:0-1282
The reason they're both being increased in height is because your .abc class doesn't have a set height. So when you increase the height of the content div you're also increasing the height of the parent, and therefore the Image div as well.
You can fix this by setting the height to the parent element
.abc {
...
height: 200px;
}
Related
I have tried thing like overflow:auto and margin-left overflow:auto cuts of some part from left of the div and margin-left will not work when length of div is increased is there any better option.As you can see in below code you are not able to see the text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
</head>
<style>
body{
min-height: 100vh;
display: flex;
justify-content: center;
margin: 0 ;
align-items: center;
flex-direction: column;
overflow: auto;
}
h1{
width: 2500px;
min-height: 300px;
background: pink;
color: black;
}
</style>
<body>
<h1>This is h1</h1>
</body>
</html>
The issue with your code is that you are centering the items vertically in the flex.
This causes the div to shift to the left, thus going out of the page. Since you cannot scroll beyond the left boundary of the page, that part of the div becomes inaccessible.
You can fix this by making sure that the flex container is wide enough. Add the following line to the body style:
width: fit-content;
I am using css grid in my demo application.My application is working fine when I have small heading or small title (h2).
but when The title is big my application works behave buggy or not as expected output .
here is my code
https://codepen.io/naveen-1234/pen/zYzKqQW
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 40px);
}
.one {
grid-column: 2/5;
grid-row: 2/5;
background-color: #ee0
}
.two {
grid-column: 4/8;
grid-row: 3/8;
background-color: #eee;
padding: 20px;
border: 1px solid #000
}
.header_container {
position: relative;
border: 1px solid #000;
min-height: 50px
}
.header_container h2 {
position: absolute;
bottom: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">one</div>
<div class="two">Two
<div class="header_container">
<h2>Lorem ipsum dolor sit amet</h2>
</div>
</div>
</div>
</body>
</html>
First case (which is working fine) when tile is small
Case two when Title is big.it show like this which is wrong. It overlap the Two text and not increase the container.
Expected output.
When Title text increase both black border container increase in upward direction .Inner black border and outer black border grows in upward direction.
It will not overlap the text (TWO)
Expected output screenhot
Change your css for .header_container h2 like below and it should work.
.header_container h2 {
margin: 0;
}
It is happening because you are using position absolute for the h2 heading.]
.header_container h2 {
/* position: absolute;
bottom: 0;
padding: 0;
*/
margin: 0;
}
What position absolute does that it makes the element like a ghost and it is not able to take any space in the HTML flow. If you want to use absolute position use it on the parent that is on <div class="two">Two</div>
If you find the answer helpful then please accept it. It lets others know that it is the correct answer.
Hey guys i am trying to make transition when the scroll it pass the first div( that is with the class name "one") height it will resize it width to 20% and the second div ( with the class name "two") will take the remaining width of the "one" class. <== when this happened it will turn the "two" class to a display as a block rather than inline-block. the problem that i have right now is that when the ".one" class it got resize to 20% the ".two" class disappear same as the below class and when the ".two" class disappear when i scroll up it only resize the ".one" class div halfway . can anyone help me how to achieve this? here's my code and some image that i made of a transition that i want to make in case still confused of what i want to achieve. thanks for the help.
in here it shown from this image to the left shown display of the page before scroll and from the right image shown when the user scroll the page that will reduce the size of the div class ".
in this section of image from the left shown when the width of the div class ".one" is have width of 20% it will not resize it again and for the right image shown when the div class ".one" have width of 20% it will change the css of div class ".two" from inline block to display block and when it scroll it will show the third div.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
height: 2000px;
}
.container {
width: 100vw;
height: 100vh;
position: fixed;
}
.content-wrapper {
width: 100vw;
white-space: nowrap;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
display: inline-block;
}
.section label {
font-size: 100px;
color: white;
text-align: center;
transform: translateX(-50%) translateY(-50%);
}
.one {
background-color: red;
top: 0;
z-index: -999;
}
.two {
background-color: yellow;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content-wrapper">
<div class="section one">
<label>one</label>
</div>
<div class="section two">
<label>two</label>
</div>
</div>
<div class="revelation" style="width: 100vw; height: 100vh; background-color: black;">
<label>Tree</label>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
$(window).scroll(function() {
var winScrollTop = $(window).scrollTop() + 0,
zeroSizeHeight = $(document).height() - $(window).height(),
newSize = 1400 * (1 - (winScrollTop / zeroSizeHeight));
let box = document.querySelector('.one');
let width = box.clientWidth;
console.log(newSize)
if(newSize > 331.13772455089827 ){
$(".one").css({
"width":newSize
})
}else if(newSize <= 331.13772455089827){
$(".section").css({
"display":"block"
})
}
});
</script>
</body>
</html>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 2 years ago.
There are two divs. I want second div to occupy the remaining space. Currently it is occupying 100% height but it should take only remaining space.
html, body {
height: 100%;
width: 100%;
}
.header {
background-color: blue;
color: red;
font-size: 50px;
}
.content {
background-color: red;
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="header">Header</div>
<div class="content">
</div>
</body>
</html>
it happens because your setting the body to 100%
you can try another approach
body {
height: 100%;
width: 100%;
display:grid;
grid-template-columns:1fr;
grid-template-rows:70px 1fr;
}
and don't set the height for either of the elements
My goal is that the code in class = "nscr" is no longer affected by zooming. So if in the browser with CTRL and mouse wheel or on the mobile device by gesture, the zoom is changed, the menu should continue to be displayed as a zoom of 100%. The problem becomes clear with strong zoom. Then the menu takes up too much space on the display. Zooming should be done normally outside of class = "nscr". I do not want to use external libraries like jquery or bootstrap. All solutions using HTML, CSS and JavaScript are welcome. Does anyone have any idea how to solve this problem?
This is my code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-size: 100%;
}
div.nscr {
width: 100%;
padding-left: 10%;
background: #FFFFFF;
color: #000000;
}
div.content {
box-shadow: 0em 0em 1.25em silver;
clear: left;
height: 93%;
overflow: auto;
background: #ffffff;
color: #000000;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width-device-width; initial-scale-1.0; maximum-scale-1.0; user-scalable-no" charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nscr">
<h1>Menu</h1>
</div>
<div class="content">
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</p>
</div>
</body>
</html>