html – 当浏览器窗口大小改变时如何使子div可见？

2023年11月12日 190次阅读

如果我在index.html页面上有两个嵌套的div元素：

<body>
  <div id="parent">
        <div id="child"></div>

  </div>
</body>

父div的宽度为900,高度为800

我希望子div位于父div的右上角,因此,我为子div定义CSS如下：

#child {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 30px;
}

CSS很好,它使子div位于父div的右上角.

但是,如果我更改(更小)浏览器窗口大小,则子div在某个时刻消失(隐藏).

如何使孩子div始终可见但仍然位于
在父div的右上角,无论浏览器窗口大小如何变化？

最佳答案 给出父亲的相对位置,以便孩子的位置相对于它.

#parent {
  position: relative;
  width: 900px;
  height: 800px;
}


#child {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 30px;
}

编辑：我误解了你的要求,现在当我读到它时,我发现你希望孩子div在页面上保持可见,不管是什么,而不仅仅是在父母的左上角.为此,您需要绑定到窗口调整大小事件,并在窗口宽度小于父宽度时更改子div的位置.通过差异改变正确的位置.

好的,这是jquery会做我认为你要求它做的事情：

$(function(){
  $(window).resize(function(){
    var delta = parseInt($('#parent').width(), 10) - parseInt($(window).width(), 10);
    if (delta > 0) {
      $('#child').css('right', delta);
    }
  }); 
});

两件事情：

>如果您快速调整窗口大小,子div不会总是返回到最右侧.我不确定这是否是一个时间问题,所获得的窗口的宽度是在它实际上移动得更远或什么之后,但是当你慢慢地调整大小时这会更好,这让我相信有更好的方法来做到这一点.
>如果打开窗口使得它太小而无法首先看到子div,则不会处理移动子div.这可以使用相同的技术轻松修复,以找到子div的最佳位置,但只是在页面加载时而不是在调整大小时.

点赞