Question

我有一个元素，我需要使它的宽度是屏幕的宽度而不是父级的宽度。我该怎样做呢？

<header>
    <nav class="navbar navbar-inverse navbar-fixed-top" data-tap-toggle="false" role="navigation">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#"><img id="12" src="img/logo-3.jpg" alt="logo"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav" id="menu">
  <li><a href="#" class="drop">ENTERTAINMENT</a><!-- Begin 3 columns Item -->

    <div class="dropdown_3columns"><!-- Begin 3 columns container -->

        <div class="col_1">

                <a href="1.html"><h2>1 </h2></a>
                <hr/>
                <a href="2.html"><h2>2</h2></a>
                <hr>
                <a href="3.html"><h2>3</h2></a>                
                <hr>
                <a href="4.html"><h2>4</h2></a>
        </div>             
  </div><!-- /.navbar-collapse -->

Answer 1

您可以使用视口单元 vw来定义子div的宽度。
宽度为100vw将占据整个屏幕宽度。

示例 -

.parent {
    width: 300px;
}

.child {
    width: 100vw;
}

DEMO 此处

Answer 2

你必须使用Javascript

window.innerWidth

如何使屏幕的元素宽度宽度而不是父css

2 个答案: