CSS：2 div 秒，并排，右侧 div 在调整大小时被截断
CSS: 2 divs, side by side, right div gets cut off on resize
我正在尝试创建一个包含两个并排 div 的基本 CSS 页面，一个用于左侧导航，一个用于内容。我正在关注此页面上的答案：
CSS 2 Div Layout float
我可以实现我想要的并排外观，但是当我调整浏览器大小时，正确的 div 内容被截断了。
浏览器 (Chrome) 我屏幕的全宽：
浏览器调整大小：
我的代码（我们正在使用 bootstrap）：
<div class="container-fluid bs-docs-container">
<div class="row">
<div style="width: 300px; float:left; height:100%; background:gray; margin:0; color:white;">This is the side bar</div>
<div class="container" style="margin-left:320px; width: 90%;">
<div style="display: inline-block; height:100%; background:black; color:white; width: 90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Justo nec ultrices dui sapien eget. Aliquam sem fringilla ut morbi. Ut sem nulla pharetra diam sit amet. Massa eget egestas purus viverra accumsan in nisl. Nulla facilisi nullam vehicula ipsum a. Ridiculus mus mauris vitae ultricies leo integer malesuada. Risus sed vulputate odio ut enim blandit volutpat maecenas. Fusce id velit ut tortor pretium viverra.
Faucibus purus in massa tempor nec feugiat nisl. Amet commodo nulla facilisi nullam vehicula ipsum. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Pellentesque habitant morbi tristique senectus. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Pulvinar etiam non quam lacus suspendisse faucibus. Est sit amet facilisis magna etiam. Adipiscing bibendum est ultricies integer quis auctor. Enim eu turpis egestas pretium aenean pharetra magna. Risus sed vulputate odio ut.
Sit amet commodo nulla facilisi nullam vehicula. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Venenatis urna cursus eget nunc. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Amet dictum sit amet justo donec enim diam vulputate ut. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Amet purus gravida quis blandit. Integer enim neque volutpat ac tincidunt vitae semper quis. Iaculis at erat pellentesque adipiscing commodo elit. Habitant morbi tristique senectus et netus et malesuada fames ac. Consequat nisl vel pretium lectus. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.
Tellus mauris a diam maecenas sed enim. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Faucibus in ornare quam viverra orci sagittis eu. Volutpat diam ut venenatis tellus in. Turpis in eu mi bibendum neque egestas congue. Eget mi proin sed libero enim sed. Euismod quis viverra nibh cras. At in tellus integer feugiat scelerisque varius morbi enim. Sed viverra ipsum nunc aliquet bibendum enim. Viverra orci sagittis eu volutpat odio facilisis mauris. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Eget mauris pharetra et ultrices neque. Amet nulla facilisi morbi tempus. Libero volutpat sed cras ornare arcu dui. Diam ut venenatis tellus in.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Nibh mauris cursus mattis molestie. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Condimentum id venenatis a condimentum vitae sapien. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Magna sit amet purus gravida quis blandit turpis cursus. Bibendum ut tristique et egestas quis ipsum. Viverra nibh cras pulvinar mattis. Sed augue lacus viverra vitae congue eu consequat ac. Aliquam purus sit amet luctus. Habitant morbi tristique senectus et netus et malesuada fames. Tortor posuere ac ut consequat semper viverra nam libero justo.</div>
</div>
</div>
</div>
我注意到您的第二个 div 上有一个 margin-left: 320px，这可能会将内容推到 windows 框架之外，因为它实际上超过了边栏的宽度。如果您希望内容不违反浏览器的边界，请尝试添加 padding 而不是
尝试使用此结构，也许它会对您有所帮助，这样侧边栏具有静态宽度，内容使用剩余的 space。
.wrapper {
display: flex;
height: 100vh;
align-items: stretch;
}
.sidebar {
background-color: #EEEEEE;
min-width: 300px;
}
.content {
color: white;
background-color: black;
padding: 20px;
margin-left: 20px;
}
<div class="wrapper">
<div class="sidebar">
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quisquam minima molestiae ea cupiditate soluta dolorum. Veritatis odit architecto corrupti! Ducimus impedit enim animi veniam ratione dolor adipisci magni deserunt!
</div>
</div>
我正在尝试创建一个包含两个并排 div 的基本 CSS 页面，一个用于左侧导航，一个用于内容。我正在关注此页面上的答案：
CSS 2 Div Layout float
我可以实现我想要的并排外观，但是当我调整浏览器大小时，正确的 div 内容被截断了。
浏览器 (Chrome) 我屏幕的全宽：
浏览器调整大小：
我的代码（我们正在使用 bootstrap）：
<div class="container-fluid bs-docs-container">
<div class="row">
<div style="width: 300px; float:left; height:100%; background:gray; margin:0; color:white;">This is the side bar</div>
<div class="container" style="margin-left:320px; width: 90%;">
<div style="display: inline-block; height:100%; background:black; color:white; width: 90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Justo nec ultrices dui sapien eget. Aliquam sem fringilla ut morbi. Ut sem nulla pharetra diam sit amet. Massa eget egestas purus viverra accumsan in nisl. Nulla facilisi nullam vehicula ipsum a. Ridiculus mus mauris vitae ultricies leo integer malesuada. Risus sed vulputate odio ut enim blandit volutpat maecenas. Fusce id velit ut tortor pretium viverra.
Faucibus purus in massa tempor nec feugiat nisl. Amet commodo nulla facilisi nullam vehicula ipsum. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Pellentesque habitant morbi tristique senectus. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Pulvinar etiam non quam lacus suspendisse faucibus. Est sit amet facilisis magna etiam. Adipiscing bibendum est ultricies integer quis auctor. Enim eu turpis egestas pretium aenean pharetra magna. Risus sed vulputate odio ut.
Sit amet commodo nulla facilisi nullam vehicula. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Venenatis urna cursus eget nunc. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Amet dictum sit amet justo donec enim diam vulputate ut. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Amet purus gravida quis blandit. Integer enim neque volutpat ac tincidunt vitae semper quis. Iaculis at erat pellentesque adipiscing commodo elit. Habitant morbi tristique senectus et netus et malesuada fames ac. Consequat nisl vel pretium lectus. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.
Tellus mauris a diam maecenas sed enim. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Faucibus in ornare quam viverra orci sagittis eu. Volutpat diam ut venenatis tellus in. Turpis in eu mi bibendum neque egestas congue. Eget mi proin sed libero enim sed. Euismod quis viverra nibh cras. At in tellus integer feugiat scelerisque varius morbi enim. Sed viverra ipsum nunc aliquet bibendum enim. Viverra orci sagittis eu volutpat odio facilisis mauris. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Eget mauris pharetra et ultrices neque. Amet nulla facilisi morbi tempus. Libero volutpat sed cras ornare arcu dui. Diam ut venenatis tellus in.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Nibh mauris cursus mattis molestie. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Condimentum id venenatis a condimentum vitae sapien. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Magna sit amet purus gravida quis blandit turpis cursus. Bibendum ut tristique et egestas quis ipsum. Viverra nibh cras pulvinar mattis. Sed augue lacus viverra vitae congue eu consequat ac. Aliquam purus sit amet luctus. Habitant morbi tristique senectus et netus et malesuada fames. Tortor posuere ac ut consequat semper viverra nam libero justo.</div>
</div>
</div>
</div>
我注意到您的第二个 div 上有一个 margin-left: 320px，这可能会将内容推到 windows 框架之外，因为它实际上超过了边栏的宽度。如果您希望内容不违反浏览器的边界，请尝试添加 padding 而不是
尝试使用此结构，也许它会对您有所帮助，这样侧边栏具有静态宽度，内容使用剩余的 space。
.wrapper {
display: flex;
height: 100vh;
align-items: stretch;
}
.sidebar {
background-color: #EEEEEE;
min-width: 300px;
}
.content {
color: white;
background-color: black;
padding: 20px;
margin-left: 20px;
}
<div class="wrapper">
<div class="sidebar">
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quisquam minima molestiae ea cupiditate soluta dolorum. Veritatis odit architecto corrupti! Ducimus impedit enim animi veniam ratione dolor adipisci magni deserunt!
</div>
</div>