-1
我一直在教自己的HTML/CSS幾天了。這可能是使用JavaScript或其他的東西。但我不想繼續學習其他任何東西，直到我首先知道html/css的限制。我已經完成了我所要求的工作，但我想知道是否有更簡單/更簡潔的方法來完成此工作。我沒有使用任何固定的寬度或高度，以保持完全響應。 我已經想出瞭如何保持固定位置標題和側面導航到位的方法，但默認情況下沒有主要/滾動內容的唯一方法是將重複填充內容直接放置在固定定位內容的下面以保持正確的間距。我如何創建一個響應式頁面，使用固定的位置標題和側邊導航只使用html css？
* {box-sizing:border-box;}
.row::after { content: "";
clear: both;
display: block;}
[class*="col-"] {float: left;
padding: 15px;}
.col-3 {width: 25%;}
.col-6 {width: 50%;}
body {margin:0;}
.header-navbar { position: fixed;
width:100%;}
.header {background-color:white;
font-size:40px;}
.navbar {background-color:black;
text-align:right;}
.navbar a {text-decoration:none;
color:white;
\t \t font-size:20px;
\t \t display:inline-block;
\t \t padding:15px;}
\t \t
.navbar a:hover {background-color:red;} \t \t
.title-sidenav {position:fixed;
background-color:white;}
\t \t \t \t
.sidenav a {display:block;
text-decoration:none;
\t \t \t font-size:20px;
\t \t \t color:white;
\t \t \t background-color:black;
\t \t \t padding:15px;
\t \t \t border-radius:10px;
\t \t \t border:1px solid white;}
\t \t \t
.sidenav a:hover {background-color:red;}
.main {border-left:1px dotted black;
border-right:1px dotted black} \t
.footer {text-align:center;
background-color:black;
\t \t color:white;}
\t \t
@media only screen and (max-width: 768px) {[class*="col-"] {width:100%;}
.navbar {text-align:center;}
\t \t \t \t \t \t \t \t \t \t \t .sidenav {text-align:center;}
.sidenav a{display:inline-block;}}<div class="header-navbar">
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>
<!-- nav-header filler content start -->
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<!-- nav-header filler content end -->
<div class="row">
<div class="col-3 title-sidenav">
<h2>Column 1 Title</h2>
\t
\t <div class="sidenav">
\t <a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
\t </div>
</div>
<!-- column 1 filler content start -->
<div class="col-3">
<h2>Column 1 Title</h2>
\t
\t <div class="sidenav">
\t <a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
\t </div>
</div>
<!-- column 1 filler content end -->
<div class="col-6 main">
<h2>Column 2 Title</h2>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <h2>Column 2 Title</h2>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <h2>Column 2 Title</h2>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\t </p>
</div>
<div class="col-3">
<h2>Column 3 Title</h2>
</div>
</div>
<div class="footer">
<h6>Footer</h6>
</div>此內容填充不好看，但它似乎已經在那裏達到我想要的。它也必須是相同數量的內容才能使響應正常工作。例如，如果我在頂部導航欄填充格中只有一個重複鏈接，那麼當查看端口很大時，它將爲固定位置導航欄/鏈接保留所有正確的空格，以便下面的內容不會在下面彈出導航。但是，當它縮小到移動尺寸時，頂級導航鏈接會從屏幕移出或消失。但不知何故，當所有5個填充頂部導航鏈接都在那裏時，固定位置的鏈接可以通過填充鏈接下降。我發現這很奇怪，因爲我認爲固定定位導航將完全獨立於填充導航。所以無論如何。有沒有簡單的方法使用HTML/CSS？
請在問題本身中包含所有相關的代碼。不要讓我們去尋找CSS。您可以使用Stack Overflows片段而不是jsfiddle。它是問題編輯器中的<>按鈕。 –
段落中的問題*真的*有助於可讀性。那究竟是什麼問題？你希望頭/導航到**不**可以固定在小屏幕上？或者你*希望他們修復？ – Scott
我希望在小屏幕下將邊/導航固定的標題/導航固定不要在固定導航下使用填充內容來保持間距。 – xxkaiwaxx