个人中心
gpt4 book ai didi

html - CSS:底部 block 调整大小强制顶部 block 缩小(在固定大小的容器内)

转载 作者：行者123 更新时间：2023-11-28 03:48:29 26 4
gpt4 key购买 nike

我正在寻找以下问题的 CSS 解决方案。在一个容器内，我们有两个垂直对齐的 block ，这样它们会填满容器的整个区域，不会重叠，并且随着底部的扩大，顶部的缩小(不会超出容器的尺寸)。

考虑我们从下面代码创建的布局开始(在浏览器中查看)。必须满足以下两个要求:

  1. 当.box的size改变时，.top和.bottom一起填充它的整个区域，但 .bottom 的高度保持不变。

  2. 当 .bottom 的高度改变时，.top 的高度是改变了； .box 不受影响。

因此，我希望整个盒子模型仅由 .box 的 width/height 和 控制(例如，通过 JavaScript 修改)。 bottoms 的高度，其余所有由 CSS 自动调整。

代码(离解决方案还很远，我知道它可以用很少的 JavaScript 完成，但让我们找到一个纯 CSS 解决方案):

<html>
  <head>
    <style>
      .box {
          position:fixed;
          top:20px;
          left:20px;
          width:200px;  /* these adjust the whole box size,*/
          height:320px; /* children cannot stretch out of these limits*/
          background:silver;
      }
      .top {
          clear:left;
          height:280px; /* we want it to be like '100%-bottom's height'!*/
          margin: 3px;
          background: white;
       border: red 1px solid;
      }
      .bottom {
          position:absolute;
          bottom:0;
          //top:0;
          left:0;
          right:0;
          margin: 3px;
          height: 27px; /* this adjusts how top & bottom are sized inside the box*/
          background: white;
       border: blue 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
    </div>
  </body>
</html>

最佳答案

我看不出你为什么要这样做，也没有控制 .top .bottom 本身的高度。

使用此代码，高度取决于 div 内的文本。

<html>
  <head>
    <style>
      .box {
        border:1px solid #583454;
          position:fixed;
          top:20px;
          left:20px;
          width:200px;  // these adjust the whole box size,
          height:320px; // children cannot stretch out of these limits
          background:silver;
      }
      .top {
          clear:left;
          height:280px; // we want it to be like '100%-bottom's height'!
          margin: 3px;
          background: white;
       border: red 1px solid;
      }
      .bottom {

          bottom:0;
          //top:0;
          left:0;
          right:0;
          margin: 3px;
          height: 27px; // this adjusts how top & bottom are sized inside the box
          background: white;
       border: blue 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
    </div>
  </body>
</html>

关于html - CSS:底部 block 调整大小强制顶部 block 缩小(在固定大小的容器内)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2113765/

26 4 0
文章推荐： php - 防止 div 重新加载
文章推荐： javascript - jQuery 1.4 ajax 回调，html() 从响应中剥离外部 JS
文章推荐： c++ - 这个脚本会导致很多很多关闭吗？如果是，有什么替代方案？
文章推荐： 用于 TCP/IP 的 C++ 库 类似于 C# 中的 WebClient/HttpWebRequest
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com