时间戳

首页 > 解决方案 > Element.outerHTML 停止 div 为 100% 宽

javascript - Element.outerHTML 停止 div 为 100% 宽

问题描述

我正在尝试自己设计的学习练习。我想要两个 div，一个 25% 宽并作为侧边栏向右浮动，另一个 75% 宽作为主体向左浮动。

在此之上，我想要一个导航栏 - 100% 宽。

我想要的选项之一是从包含文件中导入 nav html，这样我就可以更改该文件并动态使用它。

我已经收集了一些 javascript 来运行 onload 来执行此操作。它将外部文件加载到 div id=navimport 的 outerHTML 中经过了很多痛苦 - 我已经让它工作了，但是当加载 outerHTML 时，导航栏 div 不是 100% 宽，所以侧边栏导航浮在它旁边。

导航栏仍然设置了 width=100% 但导入的内容加载在 div 下方，而不是 div 内部。

我已经厌倦了 textContent、innerhtml、outerHTMl 并且没有什么可以让导航栏保持 100% 的宽度以及 div 内的新内容

代码如下所示。页

    <!doctype html>
    <html lang=en>
    <head>
        <meta charset=utf-8>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="./img/favicon.ico">


        <title>Study Site</title>
        <link rel="stylesheet" type="text/css" href="./css/default.css">

    </head>

    <body>
    <nav>
    <div class="row" style="border:2px solid red;">
    <div id="navimport">Loading Nav Bar</div>   
    </div>
    </nav>

    <main role="main" class="container">

        <div id="sidebar">
            Side Bar
        </div>

        <div id="mainbody">
            Main Body
        </div>

    </main> <!-- container -->

    </body>

    <script>
    window.onload = function(){
        file="http://localhost/learning/navbar.html";
        x = new XMLHttpRequest;
        elem = document.getElementById("navimport");

        //Set up the call back
         x.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elem.outerHTML =x.responseText;}    //{elem.innerHTML = x.responseText;  elem.Textcontent = x.responseText;}
              if (this.status == 404) {elem.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              //elmnt.removeAttribute("w3-include-html");
              //includeHTML();
            }
          } 

        x.open("GET", file, true);
        x.send();
    }   

    </script>
    </html>

CSS default.css

    .row{
        width:100%;
        }


    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default */

       #sidebar{
            width:100%;
            float:left; 
            border:1px solid blue;
       }
       #mainbody{
            width:100%;
            border: 1px solid green;
            float:left;
       }


    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) { 
       #sidebar{
            width:24%;
            float:right;
       }
       #mainbody{
            width:74%;
            border: 1px solid blue;

       }
     }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
       #sidebar{

       }
       #mainbody{
            border: 1px solid orange;
       }
     }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) { 

     }

导入的文件名为 navbar.html

    <style>
        .navul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }


    .navul li {
        float:left;
    }

    .navul li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }



    /* Change the link color on hover */
    .navul li a:hover {
        background-color: #555;
        color: white;
    }

    .active {
        background-color: #4CAF50;
        color: white;
    }
    </style>
    <div style="width:100%;">
    <ul class="navul">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>

标签： javascripthtmlcssdom

解决方案

我不会使用CSS Floats（或者甚至更复杂的继承者CSS Flexbox），而是使用三个语义 HTML5 分段元素来设置您所描述的布局样式：

  • <nav>
  • <main>
  • <aside>

并使用CSS Grid定位每个。

工作示例：

body {
display: grid;
grid-template-rows: 60px calc(100vh - 60px);
grid-template-columns: 75% 25%;
}

nav {
grid-area: 1 / 1 / 2 / 3;
background-color: rgb(127, 127, 255);
overflow: hidden;
}

main {
grid-area: 2 / 1 / 3 / 2;
background-color: rgb(191, 191, 255);
}

aside {
grid-area: 2 / 2 / 3 / 3;
background-color: rgb(63, 63, 255);
}
<nav>Navigation Bar</nav>
<main>Main Content</main>
<aside>Sidebar</aside>

现在您可以包含.<nav>

推荐阅读