我想將兩個獨立 HTML 區域的按鈕欄（標記為紅色和綠色，它們之間的分隔符）在其區域的右下方以相同的高度對齊。按鈕欄也應該固定在頁面按鈕上，如果一個區域的內容更小或更高。
期望的結果：
我無法將它們帶到右側。這就是我目前的結果：
<html>
<head>
<style>
* { font-size:30px }
html,body { height: 100% }
</style>
</head>
<body>
<nav>
Logo, Navigation, Top Bar etc.
</nav>
<div style="display:flex;flex-direction:row;background:silver;position:absolute;top:65px;bottom:20px;right:20px;left:260px;">
<div style="flex-basis:30%;order:0;border:5px solid red">
<div style="padding-bottom:60px;background:pink">
Content area 1<br/><br/>
Content area 1
</div>
<div style="position:absolute;bottom:0px;background:pink;">
<div style="margin:10px 0;">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
</div>
<div style="flex-basis:auto;flex-grow:1;flex-shrink:1;order:2;border:5px solid green">
<div style="padding-bottom:60px;background:lightgreen">
Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2
</div>
<div style="position:absolute;bottom:0px;background:lightgreen;">
<div style="margin:10px 0;">
<button>Area 2.1</button>
<button>Area 2.2</button>
</div>
</div>
</div>
<div style="flex-basis:auto;order:1;;background:gray">S<br/>P<br/>L<br/>I<br/>T<br/>T<br/>E<br/>R</div>
</div>
</body>
</html>任何想法如何更好地解決這個問題？我考慮過 flexbox，但不知道如何讓兩個按鈕欄的高度相同。
uj5u.com熱心網友回復：
不使用 any position，您可以實作您想要的布局，更簡單，更好看！
另外，使用CSS檔案，它更實用，更有幫助！把所有東西都安排好，你會看到它有多棒！
body {
margin: 0px;
}
div {
box-sizing: border-box;
}
.tables {
display: flex;
margin-top: 50px;
margin-left: 250px;
border: 1px solid black;
height: 410px;
}
.pink-table {
width: 50%;
border: 5px solid red;
background: pink;
}
.pink-table>.list {
overflow: auto;
height: 350px;
}
.pink-table>.buttons {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
gap: 5px;
border-top: 5px solid red;
padding: 5px;
}
.green-table {
width: 50%;
border: 5px solid green;
background: lightgreen;
}
.green-table>.list {
overflow: auto;
height: 350px;
}
.green-table>.buttons {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
gap: 5px;
border-top: 5px solid green;
padding: 5px;
}
.middle-div {
background: gray;
padding: 0px 5px;
color: white;
}<nav>
Logo, Navigation, Top Bar etc.
</nav>
<div class="tables">
<div class="pink-table">
<div class="list">
Content area 1<br /><br /> Content area 1
</div>
<div class="buttons">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
<div class="middle-div">S<br />P<br />L<br />I<br />T<br />T<br />E<br />R</div>
<div class="green-table">
<div class="list">
Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area
2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2
</div>
<div class="buttons">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
</div>uj5u.com熱心網友回復：
為了使absolutely定位的子級相對于其父級，父級必須是position: relative;. 請參閱下面的更改。
<html>
<head>
<style>
* {
font-size: 30px
}
html,
body {
height: 100%
}
</style>
</head>
<body>
<nav>
Logo, Navigation, Top Bar etc.
</nav>
<div style="display:flex;flex-direction:row;background:silver;position:absolute; left: 200px; right: 0; top: 2em; bottom: 0;">
<div style="flex-basis:30%;order:0;border:5px solid red; position: relative;">
<div style="padding-bottom:60px;background:pink">
Content area 1<br/><br/> Content area 1
</div>
<div style="position:absolute;bottom:0px; right: 0; left: 0; text-align: end; background:pink;">
<div style="margin:10px 0;">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
</div>
<div style="flex-basis:auto;flex-grow:1;flex-shrink:1;order:2;border:5px solid green; position: relative; overflow: scroll;">
<div style="padding-bottom:60px;background:lightgreen; overflow: scroll;">
Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2
</div>
<div style="position:absolute;bottom:0px; right: 0; left: 0; text-align: end; background:lightgreen;">
<div style="margin:10px 0;">
<button>Area 2.1</button>
<button>Area 2.2</button>
</div>
</div>
</div>
<div style="flex-basis:auto;order:1;;background:gray">S<br/>P<br/>L<br/>I<br/>T<br/>T<br/>E<br/>R</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
這是針對左側的，但我認為您想建立自己的位置sticky，但是正如其他人所說的那樣更改大量代碼可能更有效...
<div style="position:absolute; bottom:0px; background:pink; overflow: hidden; width: 30%;">
<div style="margin:10px 0; position: relative; right: -223px;">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494659.html