CODEWITHSUNDEEP
htmlcss
WutWut
WutWut

Reputation: 1234

How to make the width of an element the full width of the screen and not the parent's width - css

I have an element and I need to make its width the full width of the screen instead of the full width of the parent. How do I go about doing that?

<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 -->

Upvotes: 2

Views: 1550

Answers (2)

Ni55aN
Ni55aN

Reputation: 278

You have to use Javascript

window.innerWidth

Upvotes: 1

aniskhan001
aniskhan001

Reputation: 8511

You can use viewport unit vw to define the width of child div.
A width of 100vw will take the entire screen width.

Example -

.parent {
    width: 300px;
}

.child {
    width: 100vw;
}

DEMO here

Upvotes: 5

Related Questions