写一个布局，满足当页面滚动时，左侧固定不动，右侧的最小高度与左侧一样 

<!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: flex on the body for 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: auto on 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-content with min-height: 100% and flex-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.

posted @ 2024-12-11 09:41  王铁柱6  阅读(13)  评论(0)    收藏  举报