写一个布局，满足当页面滚动时，左侧固定不动，右侧的最小高度与左侧一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Left, Scrolling Right</title>
<style>
body {
margin: 0; /* Remove default body margin */
display: flex; /* Use flexbox for layout */
}
.left-panel {
width: 200px; /* Fixed width for the left panel */
background-color: #f0f0f0; /* Example background color */
padding: 20px;
box-sizing: border-box; /* Include padding in width calculation */
}
.right-panel {
flex-grow: 1; /* Allow right panel to take up remaining space */
background-color: #ffffff; /* Example background color */
padding: 20px;
box-sizing: border-box;
min-height: 100%; /* Ensure minimum height is full viewport height */
overflow-y: auto; /* Enable vertical scrolling for right panel content */
}
/* Optional: Make sure left panel content stretches vertically */
.left-panel-content {
min-height: 100%;
display: flex;
flex-direction: column; /* Align items vertically */
}
</style>
</head>
<body>
<div class="left-panel">
<div class="left-panel-content">
<h2>Left Panel</h2>
<p>This content will stay fixed.</p>
<p>Add more content here to see the effect.</p>
<p>Even more content.</p>
</div>
</div>
<div class="right-panel">
<h2>Right Panel</h2>
<p>This content will scroll if it exceeds the viewport height.</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
<p>Lots of content here...</p>
</div>
</body>
</html>
Key improvements and explanations:
- Flexbox: Uses
display: flexon thebodyfor easier layout management. This makes it simple to have the left panel fixed and the right panel take the remaining space. flex-grow: 1: This is crucial for the right panel. It tells the right panel to expand to fill the remaining width.min-height: 100%on right panel: This ensures the right panel is always at least the full height of the viewport, even if its content is shorter. This addresses the original question's requirement.overflow-y: autoon right panel: Enables vertical scrolling only if the content of the right panel exceeds the viewport height.box-sizing: border-box;: Ensures padding is included in the element's total width and height, preventing unexpected layout issues.- Optional
left-panel-contentwithmin-height: 100%andflex-direction: column;: This ensures the content within the left panel stretches vertically to match the height of the right panel, which is useful if you have elements (like a sticky footer) that you want to position within the left panel.
This improved version provides a more robust and flexible solution for the desired layout. It's also easier to adapt and style further.
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通