Pregunta Establecer un div fijo al 100% de ancho del contenedor principal


Tengo un contenedor con algo de relleno, entonces tengo un div relativo flotante con un ancho de porcentaje (40%).

Dentro del div relativo flotante tengo un div fijo que me gustaría del mismo tamaño que su padre. Entiendo que un div fijo se elimina del flujo del documento y, como tal, se ignora el relleno de la envoltura.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Aquí está el violín obligatorio: http://jsfiddle.net/C93mk/489/

¿Alguien sabe de una manera de lograr esto?

He modificado el violín para mostrar más detalles sobre lo que estoy tratando de lograr, perdón por la confusión: http://jsfiddle.net/EVYRE/4/


75
2017-07-23 09:50


origen


Respuestas:


Puede usar el margen para el contenedor .wrap en lugar del relleno para .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle


39
2017-07-23 10:12



Qué tal si esta?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Al usar jquery puedes establecer cualquier tipo de ancho :)

EDITAR: Tal como lo afirma el sueño en los comentarios, usar JQuery solo para este efecto es inútil e incluso contraproducente. Hice este ejemplo para las personas que usan JQuery para otras cosas en sus páginas y considero usarlo también para esta parte. Pido disculpas por cualquier inconveniente que haya causado mi respuesta.


2
2017-07-23 09:58



Puede usar el posicionamiento absoluto para fijar el pie de página a la base del div principal. También he añadido 10px relleno de fondo a la envoltura (coincide con la altura del pie de página). El posicionamiento absoluto es relativo al div padre en lugar de fuera del flujo ya que ya le ha otorgado el atributo relativo de posición.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/


1
2017-07-23 11:15



Intente agregar una transformación al padre (no tiene que hacer nada, podría ser una traducción cero) y establezca el ancho fijo del niño en 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}
<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>


1
2017-12-12 15:09



Encima de tus últimas jsfiddle, te perdiste una cosa:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

Pero, ¿cómo esto resolverá tu problema? Simple, vamos a explicar por qué es más grande de lo esperado primero.

Elemento fijo #sidebar usará el tamaño del ancho de ventana como base para obtener su propio tamaño, como cualquier otro elemento fijo, una vez que se define este elemento width:inherit y #sidebar_wrap tiene 40% de valor en ancho, luego calculará window.width * 40%, entonces cuando tu ancho de ventana es más grande que tu .container anchura, #sidebar será más grande que #sidebar_wrap.

De esta forma, debes establecer un ancho máximo en tu #sidebar_wrap, para evitar ser más grande que #sidebar_wrap.

Mira esto jsfiddle que muestra un código de trabajo y explica mejor cómo funciona esto.


0
2017-10-16 20:46



hombre su contenedor es 40% del ancho del elemento padre

pero cuando usa la posición: fija, el ancho se basa en el ancho de la ventana (documento) ...

pensando, me di cuenta de que tu elemento padre tiene un 10% de relleno (izquierdo y derecho), significa que tu elemento tiene el 80% del ancho total de la página. entonces su elemento fijo debe tener 40% basado en 80% del ancho total

entonces solo necesitas cambiar tu clase #fixed a

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

si usa sass, postcss u otro compilador de css, puede usar variables para evitar romper el diseño cuando cambie el valor de relleno del elemento padre.

aquí está el violín actualizado http://jsfiddle.net/C93mk/2343/

espero que ayude, saludos


0
2017-12-01 17:50



retirar Padding: 10%; o usar px en lugar de por ciento para .wrap

mira el ejemplo: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}

-3
2017-07-23 10:01