html - CSS Boxlayout 高度展开-6ren

html - CSS Boxlayout 高度展开

转载作者：行者123 更新时间：2023-11-28 15:13:08

26

4

我想创建一个盒子布局。它应该像我的布局但扩展到底部。这些框应该在显示的底部结束。

我尝试使用 height : 100%; 和 min-height: 100%; 但框没有扩展到底部。

有没有办法从上到下扩展这个盒子，比如从左到右？

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height:100%; 
    min-height:100%;
    position:relative;
}
 
.columnsmall {
    float: left;
    width: 22%;
    padding: 10px;
    height: 40px;
}

.columnmiddle {
    float: right;
    width: 34%;
    padding: 10px;
    height: 40px;
}

.columnbig {
    float: left;
    width: 66%;
    padding:10px;
    height: 80px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

<!DOCTYPE html>
<html>
<body>

    
<div class="row">
  <div class="columnbig" style="background-color:#ddd;">
  </div>
  <div class="columnmiddle" style="background-color:#aaa;">
  </div>
  <div class="columnmiddle" style="background-color:#ccc;">
  </div>
</div>

<div class="row">
  <div class="columnsmall" style="background-color:#aaa;">
  </div>
  <div class="columnsmall" style="background-color:#bbb;">
  </div>
  <div class="columnsmall" style="background-color:#ccc;">
  </div>
  <div class="columnmiddle" style="background-color:#ddd;">
  </div>
</div>

    
    
    
</body>
</html>

最佳答案

您可以尝试使用 flex 来构建您的布局，然后使用 % 或 vh 值轻松管理高度/宽度

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  position: relative;
}

.row {
  height: 70vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}

.row:nth-child(2) {
  height: 30vh;
  flex-direction: row;
}

.columnsmall {
  width: 20%;
}

.columnmiddle {
  min-height: 50%;
  width: 40%;
}

.columnbig {
  height: 100%;
  width: 60%;
}

<div class="row">
  <div class="columnbig" style="background-color:#ddd;">
  </div>
  <div class="columnmiddle" style="background-color:#aaa;">
  </div>
  <div class="columnmiddle" style="background-color:#ccc;">
  </div>
</div>

<div class="row">
  <div class="columnsmall" style="background-color:#aaa;">
  </div>
  <div class="columnsmall" style="background-color:#bbb;">
  </div>
  <div class="columnsmall" style="background-color:#ccc;">
  </div>
  <div class="columnmiddle" style="background-color:#ddd;">
  </div>
</div>

关于html - CSS Boxlayout 高度展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47882343/

26

4

0

文章推荐： javascript - 使用其 id 更改对象的字体系列

文章推荐： javascript - 如何比较基本 lodash 循环内数组中的特定项目

文章推荐： javascript - 使用 jquery 将跨度类传递给数据属性

Java BoxLayout 返回错误 BoxLayout 无法共享
以下用于布局组件的代码返回错误 public class MainPanel extends JPanel { private JTextField txt1, txt2; priva
python - 基维 : BoxLayout containing horizontal BoxLayout
我试图将 4 个水平盒子布局以垂直方式堆叠在 BoxLayout 中。我的 KV 文件: : BoxLayout: size: root.size pos:
java - BoxLayout 无法共享。尝试将数组中的多个标签添加到 BoxLayout 面板中
我知道这里有很多 BoxLayout 问题，但是我找不到可以解决我的问题的问题。我需要我的 ScoreDescPanel 来在彼此正下方显示每个标签(如列表)，但是我在使用 BoxLayout 时遇到
Java-BoxLayout
我正在使用 BoxLayout 来定位服务器 GUI 的 GUI 元素。我的 JLabels 发生了一件奇怪的事情。我想知道为什么当我将字符串附加到 JTextArea 时，JLabels 会从其原始
Java:BoxLayout 无法共享错误
我正在尝试制作一个简单的计算器，以熟悉我刚刚在计算机科学入门类(class)中学到的 GUI 的创建。我在按照我想要的方式排列 GUI 时遇到问题。我认为 BoxLayout 是完美的，但每当我尝试使
java - BoxLayout 为自定义组件提供了意外的宽度
我有一个非常简单的自定义组件。它的首选最大尺寸为 100x100，并且只是一个红色矩形。我将其添加到使用框布局的 JPanel 中。我预计自定义组件的大小为 100x100，但实际上它是 50x100
java - BoxLayout 粘在顶部
我刚刚开始摆弄 BoxLayout 管理器。我制作了两个相邻的按钮，第三个按钮应该转到下一行(前两个按钮下方)，前两个按钮应该位于框架的顶部。我怎样才能做到这一点？这是我当前的代码 Bo
java - BoxLayout 不起作用？
我的这段代码似乎抛出了 IllegalComponentException，但我不确定为什么。归结为以下几行代码: JRadioButton setRed = new JRadioButton(“Re
java - BoxLayout 仅显示最后添加的组件
查看了一些以前与我的主题相关的帖子，但也无济于事。尝试使用 BoxLayout 对齐组件但我无法让它发挥作用。我已经修改了一段时间，得到了不同的结果，但我无法弄清楚。我用的是默认的FlowLayou
Java BoxLayout 给出不正确的结果
我有两个 JPanel，我想将它们排列在一个更大的 JPanel 内部，一个叠在另一个之上。 “panel_controls”覆盖.getPreferredSize()。代码: public fina
java - 以与其他组件相同的方式声明 BoxLayout
你好，我正在尝试以与声明 BorderLayout 相同的方式声明 BoxLayout 声明borderlayout的方式 JPanel textFiled = new JPanel(new Bord
java - BoxLayout 在底部留下像素线
如所附屏幕截图所示 - 黄线来自底层 BoxLayout 面向的 JPanel。更改为 BorderLayout 删除黄线: 代码示例如下: import java.awt.BorderLayout;
java - BoxLayout 无法共享
是的，我用谷歌搜索了大约 30 分钟。是的，stackoverflow 中有 2 个关于该主题的不同帖子，但这些帖子并没有为我的问题提供任何解决方案。我正在使用相当多的带有 BoxLayout 的面
java - BoxLayout:编译错误
我正在尝试在我的程序中制作 BoxLayout 布局。我使用 Eclipse，所以当我输入这些行时， JTextArea fntxt = new JTextArea(1, 20); JTextArea
Java BoxLayout 使用全宽
我正在创建一个具有多个聊天的消息传递程序。在聊天窗口的一侧有一个 JPanel，其中包含用于切换聊天的所有按钮的列表数组。我无法使侧面板中的所有按钮具有相同的宽度，无论它们包含什么。但无论我尝试什么似
java - 尝试将布局设置为 BoxLayout
我似乎无法在网上找到解决方案来解释为什么我在尝试运行时遇到此错误我正在为不同的程序制作一个简单的测试系统，当按下按钮时将在文本框中产生值。我希望它们位于不同的行以使其更清晰，所以我研究了布局。我认为
java - 在运行时将项目插入 BoxLayout？
我试图弄清楚如何在运行时将项目插入到 BoxLayout...或使用不同的小部件/面板/布局实现类似的效果。应用程序窗口的设计是垂直堆叠多个面板(BoxLayout.Y_AXIS)。然后，用户可以插
java - 使用没有容器目标的 BoxLayout？
我正在尝试使用 BoxLayout 而不是我的 GridLayout 代码: setLayout (new GridLayout (5, 2)); 除了我注意到，当你做 BoxLayout 时，你需要
Java BoxLayout 对齐问题
谁能帮帮我。为什么标签“当前”没有在面板/框架中左对齐？ public static void main(String[] args) { JFrame TFrame =
java - BoxLayout 无法将奇数宽度的单个元素居中对齐
我正在尝试沿面板中心的垂直轴对齐多个元素，而 BoxLayout 似乎正是我所需要的。但是，当添加的所有元素都具有奇数宽度时，它似乎会做一些奇怪的事情。这是演示这种古怪行为的 SSCCE: impo

首页

博学

6Ren·AI

商城

html - CSS Boxlayout 高度展开