调整div宽度致内容沉底，如何实现右上角指定占比的浮动矩形？

我来帮你搞定这个小问题！你遇到的内容都固定在div底部的情况，主要是因为没给这个浮动容器设置合适的内部布局规则，再加上可能忽略了一些盒模型的细节。咱们一步步来修复：

第一步：先修正HTML的小错误 #

你代码里的<h1> More Stuff </h2>标签不匹配，浏览器渲染时可能会出奇怪的问题，先改成正确的闭合标签：

<div id="test">
  <input id="search" type="text" placeholder="Search name" name="firstname">
  <h1> More Stuff </h1>
</div>

第二步：用CSS搞定布局和内容对齐 #

下面的CSS会帮你实现右上角浮动、尺寸符合要求，同时让内容从顶部开始排列：

#test {
  /* 固定在视口右上角，滚动页面也不会移位 */
  position: fixed;
  right: 0;
  /* 垂直占90%，上下各留5%的空隙避免贴边 */
  top: 5%;
  height: 90%;
  /* 水平占20%宽度 */
  width: 20%;
  /* 核心：用Flex布局控制内部元素排列 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 让内容从顶部开始排列，不再贴底部 */
  /* 可选优化：避免内容贴容器边缘，同时保证尺寸不超标 */
  padding: 1rem;
  box-sizing: border-box; /* 把内边距和边框算进宽高里，不会超出20%/90%的设定 */
  border: 1px solid #ddd; /* 加个边框方便你看效果，不需要可以删掉 */
}

关键属性解释： #

• position: fixed：如果你的需求是始终固定在浏览器窗口右上角，用这个属性最适合；如果是要相对于某个父容器浮动，就换成position: absolute，同时给父容器加position: relative。
• box-sizing: border-box：这个一定要加！不然padding和边框会让div的实际宽高超过你设定的20%/90%，导致布局溢出。
• display: flex系列属性：默认的块级布局在容器有固定高度时，有时候会因为margin折叠或者默认对齐方式导致内容偏移，用Flex可以精准控制内容的排列方向和位置，这里设置成垂直排列+顶部对齐，完美解决内容贴底的问题。

如果之后你想调整内容的位置，比如垂直居中，只需要把justify-content: flex-start改成justify-content: center就行，非常灵活~

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