Organizing html structure with css
Question
- Header: fixed at top of the screen.
- sideNav: semi-fixed position, scrollable based on its own content size.
- mainDisplay: semi-fixed position, scrollable based on its own content size.
- Footer: fixed at the bottom.
sideNav and mainDisplay side-by-side
semi-fixed: Normally in the screen, it is fixed, but when its content will reach at the end (in case of large scrollable content of sideNav/mainDisplay) then only the footer section will come upwards at the bottom of the screen.
only HTML, CSS, JS are preferable. Possible to implement idea of semi-fixed? any help...
* { margin: 0px; padding: 0px; } header, section, footer, aside, nav, article, hgroup { display: block; } body { text-align: center; } :root { --navMenuWidth: 100px; } #header { margin: 0px; padding: 10px; background: #6A1B9A; color: azure; position: fixed; width: 100%; height: 20px; } #footer { margin: 0px; padding: 10px; background: #D500F9; bottom: 0; } #sideNav { position: fixed; left: 0px; top: 40px; text-align: center; height: calc(100vh - 40px); width: var(--navMenuWidth); overflow: auto; list-style-type: none; background: linear-gradient(#ec7014, #081d58); float: left; } .mainDisplay { width: calc(100% - var(--navMenuWidth)); display: inline-block; }
<body> <div id="header">This is the header</div> <div id="mainBox"> <nav id="sideNav"> <ul> <li class='menuItem hasSubMenu'> <div class="subMenu"> <span class="menuLabel" title="Item 1">Item 1</span> <span class="subMenuIcon"></span> </div> <ul class="subMenuList"> <li class="subMenuItem"> <a href="http://google.com">Submenu1</a> </li> <li class="subMenuItem"> <a href="http://google.com">Submenu2</a> </li> </ul> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> </ul> <button id="iconMenu" class="iconMenu"> <span class="iconMenuLabel" title='iconMenu'>icon menu</span> </button> </nav> <div id="mainDisplay"> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> <div id="footer">This is the footer</div> </body><body> <div id="header">This is the header</div> <div id="mainBox"> <nav id="sideNav"> <ul> <li class='menuItem hasSubMenu'> <div class="subMenu"> <span class="menuLabel" title="Item 1">Item 1</span> <span class="subMenuIcon"></span> </div> <ul class="subMenuList"> <li class="subMenuItem"> <a href="http://google.com">Submenu1</a> </li> <li class="subMenuItem"> <a href="http://google.com">Submenu2</a> </li> </ul> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> </ul> <button id="iconMenu" class="iconMenu"> <span class="iconMenuLabel" title='iconMenu'>icon menu</span> </button> </nav> <div id="mainDisplay"> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> <div id="footer">This is the footer</div> </body>
2 answers
solution1
0 2018-08-12 15:03:15
Changes made:
1) for footer added
position:fixed //to fix it at bottom
width:100% //to display div with 100% width
2) for mainDisplay:
Removed dynamic width component from side navigation and main display and added position: relative to side nav. so now main display is changed accordingly.
Added fixed width to side nav
Update :
Fiddle : https://jsfiddle.net/6wbfukj9/25/
Note: Avoid using calc. it causes calclulations on every mouse movement effectively causing strain on browser.
solution2
0 ACCPTED 2018-08-13 15:07:22
Thanks everyone for your time. I did it in the following way...
:root { --navMenuWidth: 200px; --headerHeight: 50px; } *{ margin: 0px; padding: 0px; border: 0px; text-align: center; } body { display: inline-block; } #header{ width: 100vw; height: var(--headerHeight); background: rgb(186, 43, 214) } #sideNav{ overflow: auto; width: var(--navMenuWidth); height: calc(100vh - var(--headerHeight)); float: left; } .menuItem{ height: 100px; } #mainDisplay{ overflow: auto; width: calc(100vw - var(--navMenuWidth)); height: calc(100vh - var(--headerHeight)); } #footer{ background: rgba(66, 212, 74, 0.904); }
<body> <div id="header">This is the header</div> <div id="mainBox"> <nav id="sideNav"> <ul> <li class='menuItem hasSubMenu'> <div class="subMenu"> <span class="menuLabel" title="Item 1">Item 1</span> <span class="subMenuIcon"></span> </div> <ul class="subMenuList"> <li class="subMenuItem"> <a href="http://google.com">Submenu1</a> </li> <li class="subMenuItem"> <a href="http://google.com">Submenu2</a> </li> </ul> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> </ul> </nav> <div id="mainDisplay"> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> <div id="footer">This is the footer</div> </body><body> <div id="header">This is the header</div> <div id="mainBox"> <nav id="sideNav"> <ul> <li class='menuItem hasSubMenu'> <div class="subMenu"> <span class="menuLabel" title="Item 1">Item 1</span> <span class="subMenuIcon"></span> </div> <ul class="subMenuList"> <li class="subMenuItem"> <a href="http://google.com">Submenu1</a> </li> <li class="subMenuItem"> <a href="http://google.com">Submenu2</a> </li> </ul> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> <li class="menuItem"> <a href="#"> <span class="menuLabel" title="Item 2">Item 2</span> </a> </li> </ul> </nav> <div id="mainDisplay"> Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> <div id="footer">This is the footer</div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Organizing HTML and JavaScript files
Best practices for organizing the structure of folders and files in a Lib
Can I use CSS to change this HTML structure?
Organizing CSS and Javascript in a single template multiproject site
Javascript - object loop and organizing data within HTML
Organizing single page website html code with knockoutjs
How to get the css value from outer html structure using Jquery?
Add CSS via javascript to an element works in console but not in html structure
HTML/CSS structure collapsing every time JavaScript triggered
Organizing objects in html5 webgl canvas animation with three.js
Related Tags