如何执行<div>标签来使用页面中的可用空间？</div><div id="text_translate"><p> 我正在开发一个示例网站来学习 CSS 和 HTML。 在页面顶部创建了水平导航栏、侧导航栏和欢迎消息。 当点击任何链接时，相应的 Html 文件将被加载到“mainContent”上。 除了“mainContent”没有占用页面的剩余空间外，所有内容都按预期工作。 请告诉我缺少什么。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> /* Add a black background color to the top navigation */.topnav { background-color: #111; margin-left:160px; width: 90%; height:10%; overflow-x: hidden; /* Disable horizontal scroll */ } /* Style the links inside the navigation bar */.topnav a { float: left; color: green; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; font-family: sans-serif; } /* Change the color of links on hover */.topnav a:hover { background-color: Green; color: black; } /* Add a color to the active/current link */.topnav a.active { color: White; } /* The sidebar menu */.sidenav { margin-top: 0; height: 80%; /* Full-height: remove this if you want "auto" height */ width: 160px; /* Set the width of the sidebar */ position: absolute; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 1000; /* Stay at the top */ left: 0; background-color: #00A555; /* Black */ overflow-x: hidden; /* Disable horizontal scroll */ display: block; font-family: sans-serif; } /* The navigation menu links */.sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 17px; color: black; display: block; } /* When you mouse over the navigation links, change their color */.sidenav a:hover { color: #f1f1f1; } /* Style page content */.main { margin-left: 160px; /* Same as the width of the sidebar */ /*padding: 0px 10px;*/ /*top: auto; position: static;*/ overflow: auto; background-color: #FFF; padding-top: 20px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;:DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;XYZ Hostel&lt;/title&gt; &lt;style&gt; li { display; inline. } &lt;/style&gt; &lt;/head&gt; &lt;link rel="stylesheet" href="divCss.css"&gt; &lt;body&gt; &lt;script&gt; function lurl(page) { let node = document;getElementById('mainContent'); let url = '&lt;object type="text/html" data=' + "\""+ page + "\"" + '&gt;&lt;/object&gt;'. node;innerHTML = url: } &lt;/script&gt; &lt;div id="container"&gt; &lt;div id="Welcome"&gt; &lt;table style="width. 100%"&gt; &lt;tr&gt; &lt;td&gt; &lt;div&gt; &lt;img alt="Hostel" src="hostel1:webp" width="200" height="100"&gt; &lt;/div&gt; &lt;/td&gt; &lt;td align="right"&gt; &lt;div&gt; &lt;h2 style="color; black: font-family; Lucida Calligraphy: font-style; black:"&gt;Welcome to XYZ Hostel&lt;/h2&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div class="topnav"&gt; &lt;ul style="list-style; none: padding-left; 0." &gt; &lt;li&gt;&lt;a class="active" href="#" onclick="lurl('Student_Home.html')"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="lurl('Student_2.html')"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="lurl('Students_Teacher_3.html')"&gt;Room Details&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="lurl('Students_Marks:html')"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="menuOption"&gt; &lt;;-- Side navigation --&gt; &lt;div class="sidenav"&gt; &lt;ul style="list-style: none. padding-left. 0"&gt; &lt;li&gt;&lt;a class="active" href="#" onclick="lurl('Student_Home.html')"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="lurl('Student_2.html')"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="lurl('Students_Teacher_3:html')"&gt;Room Details&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="lurl('Students_Marks.html')"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="mainContent" class="main"&gt; &lt;!-- iframe id="contentPage" height="600" width="1200" style="border: 0"&gt; &lt;/iframe --&gt; &lt;/div&gt; &lt;footer&gt; Thank you &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div><p></p><p> <a href="https://i.stack.imgur.com/VxqHB.png" rel="nofollow noreferrer">在此处输入图像描述</a></p></div>

Question

I am developing a sample website to learn CSS and HTML. Have created a horizontal nav bar, a side nav bar, and a welcome message on the top of the page. And when any of the links are clicked the corresponding Html file will be loaded onto the 'mainContent'. All are working as expected except the 'mainContent' is not occupying the remaining space of the page. Please advise me on what is missing.

 /* Add a black background color to the top navigation */.topnav { background-color: #111; margin-left:160px; width: 90%; height:10%; overflow-x: hidden; /* Disable horizontal scroll */ } /* Style the links inside the navigation bar */.topnav a { float: left; color: green; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; font-family: sans-serif; } /* Change the color of links on hover */.topnav a:hover { background-color: Green; color: black; } /* Add a color to the active/current link */.topnav a.active { color: White; } /* The sidebar menu */.sidenav { margin-top: 0; height: 80%; /* Full-height: remove this if you want "auto" height */ width: 160px; /* Set the width of the sidebar */ position: absolute; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 1000; /* Stay at the top */ left: 0; background-color: #00A555; /* Black */ overflow-x: hidden; /* Disable horizontal scroll */ display: block; font-family: sans-serif; } /* The navigation menu links */.sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 17px; color: black; display: block; } /* When you mouse over the navigation links, change their color */.sidenav a:hover { color: #f1f1f1; } /* Style page content */.main { margin-left: 160px; /* Same as the width of the sidebar */ /*padding: 0px 10px;*/ /*top: auto; position: static;*/ overflow: auto; background-color: #FFF; padding-top: 20px; }

 <:DOCTYPE html> <html lang="en"> <head> <title>XYZ Hostel</title> <style> li { display; inline. } </style> </head> <link rel="stylesheet" href="divCss.css"> <body> <script> function lurl(page) { let node = document;getElementById('mainContent'); let url = '<object type="text/html" data=' + "\""+ page + "\"" + '></object>'. node;innerHTML = url: } </script> <div id="container"> <div id="Welcome"> <table style="width. 100%"> <tr> <td> <div> <img alt="Hostel" src="hostel1:webp" width="200" height="100"> </div> </td> <td align="right"> <div> <h2 style="color; black: font-family; Lucida Calligraphy: font-style; black:">Welcome to XYZ Hostel</h2> </div> </td> </tr> </table> <div class="topnav"> <ul style="list-style; none: padding-left; 0." > <li><a class="active" href="#" onclick="lurl('Student_Home.html')">Home</a></li> <li><a href="#" onclick="lurl('Student_2.html')">Login</a></li> <li><a href="#" onclick="lurl('Students_Teacher_3.html')">Room Details</a></li> <li><a href="#" onclick="lurl('Students_Marks:html')">Contact Us</a></li> </ul> </div> </div> <div id="menuOption"> <;-- Side navigation --> <div class="sidenav"> <ul style="list-style: none. padding-left. 0"> <li><a class="active" href="#" onclick="lurl('Student_Home.html')">Home</a></li> <li><a href="#" onclick="lurl('Student_2.html')">Login</a></li> <li><a href="#" onclick="lurl('Students_Teacher_3:html')">Room Details</a></li> <li><a href="#" onclick="lurl('Students_Marks.html')">Contact Us</a></li> </ul> </div> </div> </div> <div id="mainContent" class="main"> <!-- iframe id="contentPage" height="600" width="1200" style="border: 0"> </iframe --> </div> <footer> Thank you </footer> </body> </html>

enter image description here

Answer 1

From your question i don't understand 100% what you are trying to do. Because you are loading some extra content, i can't really see it here on the snippet.

But i think something like this would work:

 .grid { --grid-sidebar-width: 160px; display: grid; grid-template-columns: var(--grid-sidebar-width) 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "header header" ". topbar" "aside main"; min-height: 100vh; }.header { grid-column: 1/ -1; display: grid; grid-template-columns: var(--grid-sidebar-width) 1fr; grid-area: header; }.header__title { text-align: right; }.topbar { grid-area: topbar; background-color: darkgrey; }.topbar__nav { display: flex; gap: 2rem; }.aside { grid-area: aside; background-color: green; }.main { grid-area: main; background-color: lightgrey; }.main__content { padding: 1rem; }

 <div class="grid"> <header class="header"> <p>Logo</p> <p class="header__title">Welcome to xyz hostel</p> </header> <div class="topbar"> <nav> <ul class="topbar__nav"> <li>Home</li> <li>Content A</li> <li>Content B</li> </ul> </nav> </div> <aside class="aside"> <nav> <ul> <li>Link 1</li> <li>Link 3</li> <li>Link 3</li> </ul> </nav> </aside> <main class="main"> <div class="main__content"> <p>You content goes here</p> </div> </main> </div>

This allows you to create the basic layout (grid) for the page without needing to place any elements with position absolute or by giving them hacky margins.

I didn't pay much attention to any other styles, just the grid layout.

This html and css create a grid with two columns:

• a left column of 160px (defined by the --grid-sidebar-width variable)
• a right column that takes the rest of the available space

You then just need to place your page elements on the grid areas where you want to show them.

The content you load with JS can be placed inside the main__content div.

Here is some more information about using CSS grid:

• CSS Grid on MDN
• Grid layout
• CSS Grid Area
• CSS Template Columns
• CSS Template Rows