我在一個博客上工作，我想在左邊的博客文章，在右邊的管理，本質(zhì)上是一個完整的博客(用戶/開發(fā)人員)在一個頁面上的界面，但我希望開發(fā)人員一方是可滾動的，用戶界面是固定的。
看一看css
.h-100-vh {
height: 100vh !important;
overflow-y: hidden;
}
.scroll-y {
overflow-y: auto !important;
overflow-x: hidden !important;
}
.rounded-xxlg-top {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.rounded-xxlg-bottom {
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.nav-tabs .nav-link.active {
color: white !important;
background-color: #007bff !important;
}一些html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wicked Blog</title>
<link rel="stylesheet" href="assets/bootstrap-4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="container-fluid" style="position: sticky;">
<div class="row mt-3">
<div class="col-md-8 blog-left">
<div class="shadow-sm">
<div class="header py-3 bg-primary text-center rounded-xxlg">
<img src="assets/media/images/brand/logo/logoBW.png" width="140" alt="" class="img-fluid">
<h1 class="text-white mt-3">Welcome to <span>Wicked Blog</span></h1>
</div>
<main class="py-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p>
</main>
</div>
</div>
<div class="col-md-4 blog-right shadow-lg">
<!-- Tab panes -->
<div class="tab-content px-3 py-4">
<?php if(isset($_GET['avw']) && $_GET['avw'] == 'new-blog'): ?>
<div class="tab-pane active">
<form action="" method="post">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" placeholder="Enter Title">
</div>
<div class="form-group">
<label>Content</label>
<textarea name="content" class="form-control" cols="30" rows="5"></textarea>
</div>
<div class="form-group form-check">
<label>Category</label>
<select name="category" id="category" class="form-control form-select">
<option value="">--Pick Category--</option>
<option value="">option</option>
</select>
</div>
<div class="form-group">
<label for="">Cover Image</label>
<input type="file" name="coverImage" class="form-control form-control-file">
</div>
<div class="preview-box p-5 m-5 bg-dark">
</div>
<div class="text-center">
<button type="submit" name="saveBlog" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-danger">Cancel</button>
</div>
</form>
</div>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
</body>
</html>我試圖給整個頁面一個高度，并使用overflow-y屬性，我還嘗試了位置:固定道具，但沒有變化，整個頁面仍然是可滾動的
以下是您可能想要的:
.my-container {
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
}
.my-container > div {
overflow-y: auto;
}<div class="my-container">
<div class="container-fluid">
Left column content here...
</div>
<div class="container-fluid">
Right column content here...
</div>
</div>看到它工作:
.split-screen {
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.split-screen>div {
overflow-y: auto;
}<link
rel="stylesheet"
/>
<div class="split-screen">
<div class="left-panel container-fluid">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed erat
vel mauris pellentesque faucibus vel et purus. Nam convallis metus justo,
at efficitur sapien lacinia varius. Sed pulvinar turpis ut lorem dapibus
venenatis. Vestibulum laoreet mattis efficitur. Aliquam lobortis augue
venenatis eleifend gravida. Etiam quis felis luctus, facilisis metus in,
interdum diam. Aenean in ullamcorper orci. Ut sed elit feugiat, accumsan
lectus eu, euismod nisl. Fusce finibus, libero quis tempor sollicitudin,
dui leo convallis nunc, nec efficitur mi purus at augue. Maecenas volutpat
ornare tincidunt. Aliquam erat volutpat. Vivamus tristique sem vitae est
euismod, sed ultrices tortor cursus.
</p>
<p>
Maecenas aliquet volutpat hendrerit. Sed eget justo non odio finibus
cursus sit amet id augue. Ut rutrum vitae metus et suscipit. Morbi porta
porta vestibulum. Sed id sem posuere, feugiat sapien vitae, tempor est. In
tincidunt tortor nec euismod laoreet. Duis eget ultrices lacus. Vivamus
dictum eget diam sit amet congue. Quisque placerat, ligula sed dapibus
sagittis, arcu sem tincidunt ligula, ac fringilla elit leo vitae lacus.
Duis consectetur elementum pharetra. Aenean eget commodo urna.
</p>
<p>
Proin commodo lacus justo, ac bibendum mi congue nec. Sed fermentum
suscipit diam, quis porta nibh sagittis in. Integer nisi lacus, efficitur
eget ullamcorper id, ornare a felis. Phasellus gravida tellus tortor, eget
tempor eros blandit et. Suspendisse vel eros sit amet augue eleifend
ullamcorper sed eget felis. Quisque vitae semper libero. Nunc consectetur
euismod rhoncus. Curabitur tristique ultricies mollis. Aenean vel pharetra
purus. Nam interdum felis a arcu convallis, at lobortis mi vehicula.
Aenean a ullamcorper lacus.
</p>
<p>
Proin ullamcorper lorem semper, mollis velit vitae, accumsan nunc.
Vestibulum eget lorem in lacus vulputate lacinia. Etiam malesuada a augue
sed aliquet. Integer vitae aliquet odio. Ut pharetra ut nisl condimentum
sodales. Pellentesque a elit tellus. Nam fringilla lacus quis turpis
varius, ac cursus nibh interdum. Nam interdum pellentesque dolor vitae
sollicitudin.
</p>
<p>
Proin nisi tellus, tincidunt maximus accumsan a, consequat at dui. Morbi
mattis pretium nibh, sed finibus dui laoreet a. Mauris tempor ullamcorper
nisl. Donec ligula odio, lacinia ut pellentesque ultricies, hendrerit nec
lectus. Donec dolor enim, pharetra vel elit nec, tempor dignissim quam.
Nulla facilisi. Pellentesque ultrices elementum erat, at rhoncus est
venenatis ac. Aenean a risus ac lorem egestas fringilla in in sapien.
Nullam id iaculis magna. Mauris nunc enim, sollicitudin ut sagittis vitae,
euismod at neque. Phasellus tincidunt nec risus vitae dapibus. Suspendisse
id ipsum non urna fringilla iaculis. Nam convallis erat vitae augue
aliquet volutpat. Quisque consequat nisl non velit dapibus, sit amet porta
enim rhoncus. Vivamus ipsum risus, fermentum vel arcu vel, luctus feugiat
ante.
</p>
<p>
Etiam elementum a enim eget pharetra. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia curae; Fusce porta
molestie augue, at posuere mi vestibulum eu. Suspendisse quis libero nisl.
Morbi congue odio ut urna porta, quis molestie libero condimentum.
Pellentesque dolor tortor, iaculis vitae eleifend cursus, fermentum ac
purus. Suspendisse gravida dictum erat eu viverra.
</p>
<p>
Cras elit odio, fermentum et ornare nec, viverra ut augue. In ac lobortis
ex, a tincidunt est. Phasellus justo nunc, ornare vel accumsan at, rhoncus
sed justo. Quisque at euismod orci, facilisis porta purus. Suspendisse
suscipit eleifend nisl, sed semper libero faucibus ut. Suspendisse
potenti. Nunc condimentum viverra ante, vel fermentum dolor fermentum a.
Etiam hendrerit tellus quis faucibus porta. Aliquam aliquam, diam ut
cursus volutpat, dolor libero ultrices quam, nec consectetur lacus est a
ex. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam aliquet tempus felis, a pellentesque
sapien ullamcorper sit amet.
</p>
<p>
Morbi porta, est nec sollicitudin mattis, risus lorem malesuada nulla, eu
fringilla ipsum sem eu augue. Sed at enim porta, tincidunt tortor vitae,
feugiat ipsum. Nulla sed arcu sit amet turpis suscipit posuere.
Pellentesque tempor libero vulputate viverra tincidunt. Nam id mi vitae
metus lacinia efficitur nec at erat. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia curae; Sed in diam
porttitor, consectetur risus quis, posuere mauris. Morbi tincidunt auctor
urna, at fermentum ante laoreet non. Sed eget turpis at mi malesuada
vehicula ac et dui. Etiam neque odio, volutpat nec eros sed, tempor congue
nisl. Sed ut erat non orci fringilla varius at non nisl. Nunc commodo
fringilla eros, eget sodales tortor vestibulum eu. Integer tellus sapien,
porttitor ut suscipit eget, cursus et justo. Suspendisse tortor ante,
lacinia sit amet velit ac, dapibus iaculis urna. Suspendisse feugiat,
magna nec volutpat sollicitudin, ante enim molestie nisi, a ornare ligula
ipsum ultrices magna. Praesent dictum varius risus.
</p>
<p>
Nulla facilisi. Praesent sagittis, elit ac commodo viverra, ex augue porta
libero, nec varius ex turpis a neque. In sit amet convallis tortor, eget
efficitur tortor. Vivamus aliquet mauris quis egestas porta. Quisque
viverra ultricies nibh, non rhoncus purus placerat at. Maecenas aliquam
est nec nulla dapibus vestibulum. Aliquam semper ante quis justo
condimentum, sit amet blandit libero bibendum. In egestas ligula sapien.
In rutrum rhoncus maximus.
</p>
<p>
Morbi in vulputate felis. Sed sed interdum est. Cras a consectetur libero,
at aliquam mi. Aliquam in eros urna. Ut scelerisque, lacus quis tempor
rutrum, nisi diam finibus massa, eu bibendum lectus magna id purus. Proin
elementum nisi odio, quis ultrices enim consectetur ac. Morbi vel ultrices
felis, vitae euismod ante. Fusce volutpat scelerisque urna ac tincidunt.
In id lacus pretium, commodo purus eu, finibus enim. Vestibulum sit amet
sodales magna, in pretium ante. Nunc maximus scelerisque sapien ut
maximus. Fusce bibendum dignissim mattis. Mauris volutpat, nibh a mollis
placerat, odio tellus tincidunt erat, eu volutpat nibh eros a nulla. Sed
nec aliquam eros. Morbi condimentum, metus vel facilisis viverra, tellus
nisl condimentum augue, a ullamcorper est ipsum eu enim.
</p>
</div>
<div class="right-panel container-fluid">Some other content here</div>
</div>