Cómo mover div de abajo a arriba

I tienen una altura variable , 100% -widthsub-menu que normalmente se coloca en la parte inferior de la página. Quiero que esté en la parte superior de la página cuando se ve a través de un navegador con una ventana pequeña. La siguiente es la estructura del HTML de la página:Cómo mover div de abajo a arriba

<div id=container style='height: 500px; background: red;'> 
<div id=content style='width: 100%; background: green;'>content</div> 
<div id=sub-menu style='width: 100%; background: blue;'>sub-menu</div> 
</div>

¿Cómo puedo obtener la variable altura sub-menu a la parte superior sin bloquear el contenido de la página usando CSS?

Fuente

2012-05-26 Question Overflow

¿Está utilizando cualquier preguntas de los medios? ¿Cómo estás trabajando si el dispositivo es una pantalla pequeña? – Undefined

@Sam: sí, estoy usando consultas de medios con el ancho de la ventana como indicador. –

¿Cómo lo posiciona en la parte inferior? Con posición: fija, o con el flujo natural de elementos? – ezakto

Si conoce la altura de su sub-menú, a continuación, puede hacerlo utilizando position: relative en #container y position: absolute tanto en el #content y #sub-menu. También tendrá que dar el #containerun valor superior que sea igual a la altura de su #sub-menu.

Fuente

2012-05-26 09:09:15 Ana

El problema es que el el menú es dinámico, dependiendo de la página en la que esté, podría haber más enlaces o menos enlaces en el menú. –

Este es un problema muy interesante entonces. Diría que un poco de JavaScript puede hacer el truco, pero tengo mucha curiosidad si alguien puede encontrar una solución pura de CSS. – Ana

Vi tus trabajos en CSS3, bastante impresionado con el sistema solar que dibujaste. Si no puedes hacerlo, dudo que otros puedan. Tendría que combinar su solución con javascript entonces. –

No estoy seguro de cómo se han establecido sus consultas de medios. Es posible que esto no sea posible con su estructura html, por lo que es posible que tenga que editar esto para que funcione.

#sub-menu 
{ 
    position:fixed; 
    top:0; 
    width:100%; 
    background-color:#f00; 
}

El código anterior deberá colocarse dentro de su consulta de medios para pantallas pequeñas.

Fuente

2012-05-26 09:04:47 Undefined

Como ha señalado usted mismo, no funciona sin cambiar la estructura html. El submenú estará bloqueando el contenido. Estoy buscando algo que funcione como una carroza. –

'posición: fijo' es genial, pero no lo usaría para dispositivos móviles, todavía hay muchos problemas - consulte http://bradfrostweb.com/blog/mobile/fixed-position/ – Ana

Aquí está la solución de consulta de medios css.

/* Mobile Portrait Size */ 
@media only screen and (max-width: 479px) { 
position:absolute; 
top:0px; 
height:auto; /* So that the content wont be lost with the reduction in width. */ 
}

Con pocas explicaciones más de cómo has colocado el div o si lo vinculas con un violín sería útil.

Fuente

2012-05-26 10:12:11 Katti

Puede utilizar display: table-header-group; ...

HTML:

<div id=container> 
    <div id=content>content</div> 
    <div id=sub-menu>sub-menu</div> 
</div>

CSS:

#container { 
    display: table; 
    width: 100%; 
} 

@media (min-width: 500px) { 
    #sub-menu { 
    display: table-header-group; 
    } 
}

Demostración: http://jsbin.com/lifuhavuki/1/edit?html,css,output

Fuente

2015-07-24 15:21:02 jjenzz

Respuesta

Cuestiones relacionadas