web-dev-qa-db-fra.com

Définir la largeur de div égale à la taille de la fenêtre

J'ai un conteneur de largeur 1300 px. À l'intérieur du conteneur, j'ai d'autres div.
Je dois définir la largeur de la division interne égale à la taille de la fenêtre du navigateur, par exemple) 1900px.
Le contenu doit être adapté à la taille de la fenêtre. 

Mon code html est comme ci-dessous: 

<div class="container">
  <div class="content">Some style goes here </div>
</div>

Css: 

.container {
   width: 1300px;
} 

.content{
  width: 100%
}`
htmlcsswidth
4
Ruthreshwar

Si vous avez la largeur div au format px, il ne répondra pas. Il doit être au format %. Si vous définissez le contenu interne sous la forme width:100% Le contenu interne aura une largeur égale à '.container'.
Ainsi, pour que la division interne corresponde à la largeur de la fenêtre, le .container doit être égal à la largeur de la fenêtre. 

CSS:

.container{
   width:100%;
}

Ou si vous voulez, nous pouvons utiliser jQuery:

 var w = $(window).width();
 $('.content').css('width', w);
12
Rijin Mk

Il semble que vous souhaitiez ouvrir votre content div en tant que fenêtre modale, en cachant le reste des éléments du corps. Essayez ceci JSBIN DEMO

.content {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
}
7
sachinjain024

changer de conteneur en

.container {
   width: 100%;
}
2
CRABOLO

Avec un width: 1300px; fixe, vous ne pouvez pas avoir un responsive to the window size div

Comme le dit le codehorse, ajoutez

.container {
   width: 100%;
}

mais ajouter 

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

css en tant que width: 100%; restituera correctement si la dimension des éléments parents a été définie auparavant !!

démo de travail

1
NoobEditor