HTML/CSS响应式视图多余高度问题解决及汉堡菜单触发双头部左侧纵向布局实现方案

Hey there! Let's tackle your two issues one by one—first the unwanted extra height in responsive views, then building that hamburger menu to stack your headers vertically on the left when clicked.

1. Fixing the Unwanted Extra Height in Responsive Views #

The extra height is caused by a mix of rigid viewport constraints, unresponsive text sizing, and overly large padding that doesn’t adjust for small screens. Here’s how to fix it:

• Replace height:100vh with min-height:100vh on body: This lets the page expand naturally with content instead of forcing it to fit the viewport, which prevents awkward scrollable gaps.
• Shrink large text for mobile: Use media queries to reduce the size of your headline text (.nd2 and .th3) on small screens so it doesn’t overflow.
• Tweak padding/margins: Reduce padding in .info and margin in .text for mobile to avoid excessive vertical space.

2. Implementing the Hamburger Menu for Vertical Left Headers #

Your current setup lacks a hamburger button and proper layout logic for mobile. Let’s add that functionality:

Step 1: Add the Hamburger Button to HTML #

Insert this right after the opening <body> tag:

<button id="hamburger" class="hamburger">☰</button>

Step 2: Update JavaScript #

Modify your JS to toggle a sidebar-active class when the hamburger is clicked:

const hamburger = document.getElementById('hamburger');
const main = document.getElementById('main');

hamburger.addEventListener('click', () => {
  main.classList.toggle('sidebar-active');
});

// Keep your existing button functionality if needed
function clicked() {}

Step 3: Add Responsive CSS Rules #

Add these styles to your CSS to handle the mobile layout:

/* Hamburger Button Styles */
.hamburger {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: transparent;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 100;
}

/* Responsive Rules (adjust breakpoint as needed) */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  /* Hide default header layouts on mobile */
  .header1, .header2 {
    display: none;
  }

  /* Sidebar layout when hamburger is active */
  #main.sidebar-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: rgba(0,0,0,0.95);
    display: flex;
    flex-direction: column;
    padding: 4rem 1rem 1rem;
    gap: 2rem;
  }

  #main.sidebar-active .header1,
  #main.sidebar-active .header2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  #main.sidebar-active .header1 .info {
    padding: 10px 0;
  }

  #main.sidebar-active .navbar ul {
    flex-direction: column;
    padding: 0;
  }

  #main.sidebar-active .navbar ul li {
    padding: 15px 0;
  }

  #main.sidebar-active .navbar ul ul {
    position: static;
    background-color: #333;
    padding-left: 1rem;
    margin-top: 10px;
  }

  #main.sidebar-active .navbar ul ul li a {
    color: white;
  }

  /* Adjust text section for mobile */
  .text {
    width: 90%;
    margin-left: 1rem;
    line-height: 4rem;
    margin-top: 40px;
  }

  .nd2, .th3 {
    font-size: 4rem;
  }

  .btn button {
    width: 180px;
    height: 60px;
    font-size: 1rem;
  }
}

/* Fix extra height issue */
body {
  background-color: black;
  width: 100%;
  min-height: 100vh;
}

Full Modified Code #

Here’s the complete code with all fixes applied:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>sample</title>
</head>
<body>
<button id="hamburger" class="hamburger">☰</button>
<div id="main">
<div id="header1" class="header1">
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
<div class="info">
<span style="color: crimson;">HOURS</span><span>Mon - Sat 8.00 - 18.00</span>
</div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
<div class="info">
<span style="color: crimson;">Call</span>+91 878778777</span>
</div>
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
<div class="info">
<span style="color: crimson;">Address</span><span>India</span>
</div>
</div>
<hr style="color: crimson;">
<div id="header2" class="header2">
<div class="navbar">
<ul class="mt">
<li class="active"><a href="">Home</a></li>
<li class=""><a href="">About</a></li>
<li class=""><a href="">Programs</a>
<ul>
<li>
<a href="#">School Program</a></li>
<hr>
<li>
<a href="#">Single Program</a></li>
<hr>
<li>
<a href="#">Schedule</a></li>
<hr>
<li>
<a href="#">Workshop and events</a></li>
<hr>
<li>
<a href="#">Get Quote</a></li>
</ul>
</li>
<li class=""><a href="">Blog</a></li>
<li class=""><a href="">Shop</a></li>
<li class=""><a href="">Elements</a></li>
</ul>
</div>
<div class="sicons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
</div>
</div>
</div>
<div class="text">
<div class="st1">ENROLL TODAY</div>
<div class="nd2">Learn To</div>
<div class="th3">Play Guitar </div>
<div class="btn">
<button onclick="clicked()"> START NOW </button>
</div>
</div>
<script>
const hamburger = document.getElementById('hamburger');
const main = document.getElementById('main');

hamburger.addEventListener('click', () => {
  main.classList.toggle('sidebar-active');
});

function clicked() {}
</script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 12px;
}
body {
background-color: black;
width: 100%;
min-height: 100vh;
}
.header1 {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: transparent;
color: aliceblue;
}
.info {
display: flex;
flex-direction: column;
padding: 20px;
}
.header2 {
width: 100%;
display: flex;
color: aliceblue;
justify-content: space-around;
align-items: center;
background-color: transparent;
height: 60px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.navbar ul {
display: flex;
flex-direction: row;
list-style: none;
position: relative;
}
.navbar ul ul {
top: 70px;
width: fit-content;
padding: 0 30px 0 30px;
display: none;
font-size: 1rem;
line-height: .01px;
z-index: 10;
transition: all 2s ease;
background-color: white;
}
.navbar ul ul li a {
color: black;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
}
a {
text-decoration: none;
color: aliceblue;
}
li {
padding: 30px;
}
.sicons {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.sicons img {
display: block;
padding: 5px;
}
.text {
z-index: 1;
position: relative;
top: 0;
width: 50%;
display: flex;
margin-left: 50px;
flex-direction: column;
margin-top: 60px;
height: auto;
line-height: 8rem;
background-color: transparent;
font-weight: 600;
}
.st1 {
font-size: 1.6rem;
color: white;
}
.nd2 {
font-size: 8rem;
color: crimson;
}
.th3 {
font-size: 8rem;
color: white;
}
.btn button {
left: 0;
width: 220px;
height: 70px;
background-color: transparent;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid white;
padding: 15px;
}
.active, .navbar ul li:hover {
border-bottom: 1px solid crimson;
}

/* Hamburger Button Styles */
.hamburger {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: transparent;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 100;
}

/* Media Queries */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .header1, .header2 {
    display: none;
  }

  #main.sidebar-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: rgba(0,0,0,0.95);
    display: flex;
    flex-direction: column;
    padding: 4rem 1rem 1rem;
    gap: 2rem;
  }

  #main.sidebar-active .header1,
  #main.sidebar-active .header2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  #main.sidebar-active .header1 .info {
    padding: 10px 0;
  }

  #main.sidebar-active .navbar ul {
    flex-direction: column;
    padding: 0;
  }

  #main.sidebar-active .navbar ul li {
    padding: 15px 0;
  }

  #main.sidebar-active .navbar ul ul {
    position: static;
    background-color: #333;
    padding-left: 1rem;
    margin-top: 10px;
  }

  #main.sidebar-active .navbar ul ul li a {
    color: white;
  }

  .text {
    width: 90%;
    margin-left: 1rem;
    line-height: 4rem;
    margin-top: 40px;
  }

  .nd2, .th3 {
    font-size: 4rem;
  }

  .btn button {
    width: 180px;
    height: 60px;
    font-size: 1rem;
  }
}

Key Explanations #

• Extra Height Fix: Using min-height:100vh ensures the page grows with content instead of being constrained to the viewport. Responsive text and padding adjustments prevent overflow on small screens.
• Hamburger Menu: The button is hidden on desktop and shown on mobile. When clicked, it toggles a class that converts the main div into a fixed sidebar with both headers stacked vertically. We also adjusted dropdown menus to fit the sidebar layout seamlessly.

内容的提问来源于stack exchange，提问作者Prabhakar Kulkarni