如何设置容器高度为全屏减去Footer高度，实现拖拽区域限制？

一、布局修正：让拖拽区域避开Footer #

原代码里的.container高度和视口一致，导致拖拽区域会覆盖Footer。我们需要调整容器高度，同时确保页面内容不被Footer遮挡：

body,html {
    font-family: Roboto;
    font-size: 18px;
    height: 100%;
    width: 100%;
    margin: 0;
    padding-bottom: 40px; /* 和Footer高度一致，防止内容被挡住 */
    box-sizing: border-box; /* 让padding算在总高度里，避免页面滚动 */
}

.container {
    height: calc(100vh - 40px); /* 视口高度减去Footer的40px，直接得到可用区域高度 */
    display: flex;
    width: 100%;
    position: relative; /* 给子元素绝对定位提供参照 */
}

.bg {
    background-image: url("http://abload.de/img/background4mqdx.jpg");
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.footer {
    width: 100%;
    height: 40px;
    box-shadow: 0px 1px 0px 0px #C2C5CA inset, 0px 2px 0px 0px #FFF inset;
    background-color: #C2C5CA;
    position: fixed; /* 固定在底部，不会随页面滚动 */
    left: 0;
    bottom: 0;
    z-index: 10; /* 确保Footer在最上层，不会被拖拽元素盖住 */
}

.draggable {
    width: 100px;
    height: 100px;
    background-color: lightgrey;
    position: absolute; /* 改成绝对定位，方便后续全屏调整 */
    cursor: move;
}

/* 全屏状态的样式 */
.draggable.fullscreen {
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
}

二、拖拽逻辑+全屏功能实现 #

修改JS代码，实现拖拽范围限制，以及双击切换全屏/恢复的功能：

$(function() {
    const $draggable = $(".draggable");
    const $container = $(".container");
    // 保存拖拽元素的原始尺寸和位置，用于恢复
    const originalState = {
        width: $draggable.width(),
        height: $draggable.height(),
        position: $draggable.position()
    };

    // 初始居中定位
    $draggable.position({
        my: "center",
        at: "center",
        of: $container
    });

    // 设置拖拽范围为.container
    $draggable.draggable({
        scroll: false,
        containment: $container,
        // 拖拽开始时如果是全屏状态，自动恢复原样
        start: function() {
            if ($(this).hasClass("fullscreen")) {
                $(this).removeClass("fullscreen");
                $(this).css({
                    width: originalState.width,
                    height: originalState.height
                });
            }
        }
    });

    // 双击拖拽元素切换全屏/恢复
    $draggable.on("dblclick", function() {
        if ($(this).hasClass("fullscreen")) {
            // 恢复原始状态
            $(this).removeClass("fullscreen");
            $(this).css({
                width: originalState.width,
                height: originalState.height
            });
            $draggable.position({
                my: "center",
                at: "center",
                of: $container
            });
        } else {
            // 进入全屏模式
            $(this).addClass("fullscreen");
            // 确保全屏后仍受拖拽范围限制
            $(this).draggable("option", "containment", $container);
        }
    });
});

三、HTML结构优化（可选） #

调整层级让结构更清晰，把.container作为最外层容器：

<head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        /* 上面的CSS代码 */
    </style>
</head>
<body>
    <div class="container">
        <div class="bg">
            <div class="draggable">
                双击切换全屏
            </div>
        </div>
    </div>
  
    <div class="footer">
        footer
    </div>
</body>

核心修改点说明 #

1. 拖拽区域限制：通过calc(100vh - 40px)精确计算可用高度，让.container刚好避开Footer区域，拖拽元素的containment绑定这个容器，就不会拖到Footer里。
2. 全屏化实现：用CSS类控制全屏状态的宽高和位置，双击触发切换；同时保存原始状态，方便恢复。
3. Footer优化：改成fixed定位确保始终在底部，z-index保证不会被遮挡。

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