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.
Related
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;
}
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
I am making a topnav and I don't want space between the body and the div element.
I want to look like that. But the thing is, I do not know how I can 'delete' or 'remove' the space between the body and the <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
</head>
<body>
<style>
body {
background: #484d49;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
}
</style>
<div class="topnav"></div>
</body>
</html>
That's what I have done, but how can I use CSS or JavaScript to delete the space between the elements.
If you could help, that'd be great.
Thanks,
Ring Games
You can remove the top margin of the body by styling it to have margin-top:0;.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
</head>
<body>
<style>
body {
margin-top:0;
background: #484d49;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
}
</style>
<div class="topnav"></div>
</body>
</html>
Your style declaration needs to be in the head of the page - not the body. And because most browsers style the html and body to have a bit of space around - you should set margin and padding to 0 on each.
Also - you should investigate the semantic elements to use for the nav and main - eg <nav> ... </nav> and <main> ... </main> in order to make the code as good as you can.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Why Linux is just better than Windows - Ring Tips </title>
<link rel="icon" href="linux.png">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #484d49;
color: #fff;
padding: 0;
-webkit-font-smoothing: antialised;
}
.topnav {
top: 0;
position: sticky;
background: #a5b0a8;
border: 0.5px solid black;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 2;
padding: 8px
}
.main-content {
height: 100%;
padding: 8px
}
</style>
</head>
<body>
<div class="topnav">This is the navigation</div>
<div class="main-content">This is main-content</div>
</body>
</html>
You can use margin to remove the space between body and stuff inside the body not padding.
body {
margin: 0;
}
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>
In my webpage I have accordion panels which collapse and close. I have set the page height to be specific. However, I want it to be specific from the start, but be able to expand when I open and close the panel, so that I don't have to set the page too be so long with no content. Any ideas about how I go about doing this?
This is only an example I used, which is the reason for the small height currently.
My Current Code:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta charset = "utf-8">
<title>London Tour Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="jquery.js"></script>
<style>
div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
background-color: white; }
div.content {
width: 700px; height: 120px;
background-color: lightblue; padding: 5px; }
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class = "content">
<button class="accordion">Panel</button>
<div class="panel">
Hello
</div>
<button class="accordion">Panel 2</button>
<div class="panel">
Hello
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</div>
</body>
</html>
If I understand correctly,
you're looking for min-height:1300px instead of height:1300px on div.container
The most robust way without the use of Javascript is to get rid of explicitly setting the height of your containers in CSS - that way the height is automatically going to conform to the total height of your child elements.
If your container is not absolutely positioned, I believe Vlad is Glad's answer with using the CSS property, min-height, will apply.
If your container must be absolutely positioned, you could grab the height of the expanded panel through jQuery in your onClick handler, and add/subtract the height to your container.
I'm trying to put together a site that has a welcome-type screen followed by a header/navigation that scrolls to the top of the page and is then fixed, remaining at the top of the page as the user scrolls on. The solution I have works in most browsers, except in the desktop touch version of Chrome I can't stop the header/nav from bouncing around once it reaches the top. I've looked at at least 10 Stack Overflow questions that address this problem, and I've tried a lot of different tutorials and plugins but none of them seem to work for me. I know it's possible because the technique appears on http://laravel.com, and the header/nav is ROCK-SOLID when it reaches the top and becomes fixed. This is what I have now:
html {
height: 100%; }
body {
height: 100%; }
#welcome {
background-color: grey;
height: 100%; }
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: absolute;
width: 100%; }
#header.fixed {
position: fixed;
top: 0;
width: 100%; }
#nav {
position: absolute;
bottom: 30px;
right: 2%; }
#nav a {
color: black;
letter-spacing: 1px;
line-height: 1.25em;
padding-left: 17px;
text-decoration: none;
text-rendering: optimizelegibility;
text-transform: uppercase; }
#about {
height: 2000px; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="welcome"></section>
<header id="header" class="container">
<nav id="nav">
One
Two
Three
Four
</nav>
</header>
<main>
<section id="about" class="container">
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
$('#header').toggleClass("fixed", top >= viewport);
});
});
</script>
</body>
May be jquery toggle make it.
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
if (top >= viewport ) {
$('#header').addClass("fixed");
} else if ($('#header').hasClass('fixed')) {
$('#header').removeClass('fixed')}
});
});
http://jsfiddle.net/molo4nik11/zvom6o5w/
I think this is working solution.
http://jsfiddle.net/molo4nik11/zvom6o5w/3/
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: relative;
width: 100%;
}
#header.fixed {
position: fixed;
top: 0;
width: 100%;
}
It has been a long time, and this is no longer an issue, but at the time chrome was not able to keep this header in place without it appearing "jumpy". I was able to fix it by adding
-webkit-transform: translateZ(0);
to the .fixed class. Although this didn't have any bearing on the visual styles that were applied, using the transform property would cause chrome to treat it as a 3d element and devote more resources to it.
As I mentioned before, this doesn't seem to be an issue anymore, and I have since been able to remove this hack without the old problem recurring.