纵向自适应布局-css(去除滚动条)

本文介绍了三种不同的网页布局方法:使用Flex布局实现响应式设计,利用position属性进行绝对定位布局,以及通过display属性设置为table来构造表格样式的布局。每种方法都提供了详细的HTML和CSS代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.   常见的flex 布局

<!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>height-flex-position-table</title>
</head>
<style>
/** html  和body  记得给宽高设定 margin重新给值为0;**/
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    .main {
        height: 100%;
        width: 100%;
        display: flex;/*盒模型*/
        flex-direction: column;/*纵向布局*/
    }
    
    .head {
        width: 100%;
        height: 200px;
        background: yellow;
    }
    
    .content {
        flex: 1;
        background: blue;
    }
    
    .footer {
        width: 100%;
        height: 200px;
        background: red;
    }
</style>

<body>
    <div class="main">
        <div class="head">head</div>
        <div class="content">
            <div>12</div>
            <div>12</div>
            <div>12</div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

2.position :absolute  绝对定位布局

<!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>height-flex-position-table</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    .main {
        height: 100%;
        width: 100%;
    }
    
    .head {
        width: 100%;
        height: 200px;
        background: yellow;
    }
    
    .content {
        position: absolute;
        bottom: 200px;
        top: 200px;
        background: blue;
    }
    
    .footer {
        width: 100%;
        height: 200px;
        position: absolute;
        bottom: 0;
        background: red;
    }
</style>

<body>
    <div class="main">
        <div class="head">head</div>
        <div class="content">
            <div>12</div>
            <div>12</div>
            <div>12</div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

3. display:table 实现布局效果

<!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>height-flex-position-table</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    .main {
        height: 100%;
        width: 100%;
        display: table;
    }
    
    .head {
        width: 100%;
        height: 200px;
        display: table-row;
        background: yellow;
    }
    
    .content {
        display: table-row;
        background: blue;
    }
    
    .footer {
        width: 100%;
        height: 200px;
        display: table-row;
        background: red;
    }
</style>

<body>
    <div class="main">
        <div class="head">head</div>
        <div class="content">
            <div>12</div>
            <div>12</div>
            <div>12</div>
            <div>12</div>
            <div>12</div>
            <div>12</div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

 

### 如何在 `van-overlay` 组件中正确显示滚动条 为了使 `van-overlay` 组件能够正确显示滚动条并允许内容滚动,在移动设备上需调整配置以及处理一些常见的兼容性问题。 #### 1. 修改 `van-overlay` 属性设置 确保 `van-overlay` 的属性 `:lock-scroll=false` 被正确定义。此属性用于控制遮罩层打开时是否锁定背景页面的滚动行为,默认情况下该选项为 true,即阻止背景滚动。当设为 false 后,则不会影响到页面其他部分的滚动功能[^2]。 ```html <van-overlay :show="overlayVisible" @click="overlayVisible = false" :lock-scroll="false"> <!-- 内部可滚动的内容 --> </van-overlay> ``` #### 2. 添加自定义样式支持滚动 为了让内部容器可以滚动,还需要给其添加合适的 CSS 样式: - 定义固定高度或最大高度; - 使用 overflow-y:auto 来实现纵向自动溢出滚动效果; ```css .custom-scrollable { max-height: calc(100vh - 80px); /* 自适应屏幕高度 */ overflow-y: auto; } ``` 将上述类名应用至需要滚动的目标元素内: ```html <div class="custom-scrollable"> <!-- 可滚动的具体内容 --> </div> ``` #### 3. 处理事件冒泡干扰滚动 有时由于事件监听器的存在可能会阻碍正常的触控操作,因此可以在挂载阶段移除不必要的默认行为,比如停止传播 touchmove 事件以防止它触发父级或其他无关区域的动作响应: ```javascript mounted() { const scrollArea = document.querySelector('.custom-scrollable'); if (scrollArea) { scrollArea.addEventListener('touchmove', function(e){ e.stopPropagation(); }, { passive: false }); } }, beforeDestroy(){ // 清除事件监听以防内存泄漏 const scrollArea = document.querySelector('.custom-scrollable'); if (scrollArea) { scrollArea.removeEventListener('touchmove', stopPropagationHandler); } } ``` 通过以上方法组合使用,应该能够在 Vue 和 Vant UI 框架下成功实现在 `van-overlay` 中展示带有滚动条的功能,并保持良好的用户体验.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值