带侧边栏页面中表单区域无法设置100%高度问题求助

要实现表单所在的蓝色背景区域占满页面总高度，同时表单居中，需要通过CSS调整布局和高度继承，具体方案如下：

核心CSS调整要点 #

• 清除根元素（html、body）默认边距，设置高度撑满视口
• 用Flex布局实现侧边栏与内容区域的横向排列
• 让表单容器占满剩余空间，并通过Flex实现内部表单的居中

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Form</title>
    <style>
        /* 重置默认样式，确保根元素撑满视口 */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }

        /* 主容器用Flex布局，占满视口高度 */
        .section {
            display: flex;
            height: 100vh; /* 等同于视口高度 */
        }

        /* 侧边栏样式 */
        .sidebar {
            width: 200px;
            background-color: #f0f0f0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .sidebar a {
            text-decoration: none;
            color: #333;
            padding: 8px;
            border-radius: 4px;
        }

        .sidebar a:hover {
            background-color: #ddd;
        }

        /* 表单容器：占满剩余空间，蓝色背景，内部居中 */
        .simpleform {
            flex: 1; /* 占据侧边栏以外的全部空间 */
            background-color: #4a90e2;
            display: flex;
            flex-direction: column;
            justify-content: center; /* 垂直居中 */
            align-items: center; /* 水平居中 */
            padding: 20px;
        }

        /* 表单样式调整 */
        .resultform {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            width: 100%;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .resultform label {
            font-weight: bold;
            color: #333;
        }

        .resultform input, .resultform button {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        .resultform button {
            background-color: #4a90e2;
            color: white;
            border: none;
            cursor: pointer;
        }

        .resultform button:hover {
            background-color: #357abd;
        }
    </style>
</head>
<body>
    <div class="section">
        <div class="sidebar">
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>
        <div class="simpleform">
            <h1>Student Information</h1>
            <form action="#" id="result-form" class="resultform">
                <label for="fullname">Full Name</label>
                <input type="text" name="fullname" id="fullname">
                <label for="email">Email</label>
                <input type="email" name="email" id="email">
                <label for="result">Result</label>
                <input type="number" name="result" id="result">
                <label for="choosefile">Choose File</label>
                <input type="file" name="choosefile" id="choosefile">
                <button>submit</button>
            </form>
        </div>
    </div>
</body>
</html>

关键说明 #

1. html, body { height: 100%; } 确保根元素能继承视口高度，为子元素提供高度基准
2. .section { display: flex; height: 100vh; } 让主容器横向排列子元素，并占满整个视口高度
3. .simpleform { flex: 1; } 让表单容器占据侧边栏之外的所有剩余空间，配合背景色实现全屏蓝色区域
4. .simpleform 内部用Flex布局的justify-content: center和align-items: center，实现表单在容器内的垂直水平居中

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