html - pantalla - overflow css
Establecer un div fijo al 100% de ancho del contenedor principal (7)
¿Qué tal this ?
$( 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.
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, disculpe la confusión: http://jsfiddle.net/EVYRE/4/
Además de su última http://jsfiddle.net/EVYRE/4/ , acaba de perder 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.
El elemento fijo #sidebar usará el tamaño de ancho de ventana como base para obtener su propio tamaño, como cualquier otro elemento fijo, una vez en este elemento se define el width:inherit y #sidebar_wrap tiene 40% como valor en ancho, luego calculará window.width * 40% , luego cuando el ancho de su ventana es mayor que su ancho de #sidebar , #sidebar será más grande que #sidebar_wrap .
De esta forma, debe establecer un ancho máximo en su #sidebar_wrap , para evitar que sea más grande que #sidebar_wrap .
Compruebe este jsfiddle que muestra un código de trabajo y explique mejor cómo funciona esto.
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>
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;
}
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;
}
Retire el Padding: 10%; o use px en lugar de porcentaje para .wrap
vea 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;
}
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