¿Cómo hacer que un borde izquierdo se ejecute hasta el final de la página?

Me gustaría darle estilo a mi página para que el contenido esté en el medio y tenga un borde amarillo a la izquierda, desde la parte superior de la página hasta la parte inferior.

Actualmente solo puedo hacer que vaya a la parte inferior usando px, o usando heredar haciendo que se detenga hasta el final de mis datos. El siguiente código no funcionó.

.content{ min-height:100%;}
html{ height:100%;}

El código completo:

html
{
    font-family: Segoe UI, Verdana, Sans-Serif;
    background-image:url('../Images/tile.jpeg');         
}

.content
{ 
    width:700px;
    margin:auto;
    padding-left:5px;    
    background-color:White;
}

.button
{
    font-family: Segoe UI, Verdana, Sans-Serif;
    height: 25px;
    width: 160px;
}

¿Cómo puedo hacer que se ejecute al final de la página completa?

¡Gracias!

preguntado el 27 de agosto de 11 a las 17:08

4 Respuestas

Respondido 27 ago 11, 21:08

Intenté eso ... Pero no funciona. Estoy usando una clase, no estoy seguro de si eso hace una diferencia. - CustomX

Tom, tendrás que proporcionar un ejemplo en vivo para seguir adelante con esto. O tu propio anfitrión o jsfiddle.net - imsky

Correcto, no asigne un fondo a html, asígnelo al cuerpo y mire el posicionamiento del fondo: developer.mozilla.org/en/CSS/background-position - imsky

Pegue lo que tenga en jsfiddle, por favor. - imsky

Dependiendo de la compatibilidad con el navegador que desee, siempre puede agregar min-height:100%; a su contenido div.

Si no le importa usar JavaScript, también puede agregar un fragmento simple para configurar height:100%; si la altura del contenedor de contenido es menor que la altura de la ventana.

JQuery:

$(function(){
    if($('#content').height() < $(window).height())
    {
        $('#content').css('height','100%');
    }
});

Demostración: http://jsfiddle.net/gBtTf/

Respondido 27 ago 11, 22:08

Iba a -1 esto porque no hay JQuery or Javascript etiqueta en la pregunta, pero esta solución realmente tiene sentido. Probablemente llevará menos tiempo implementarlo que crear un fondo en Photoshop. Mi única queja sería cargar JQuery SOLO para esto. Si el OP usa JQuery para otras cosas, entonces sí, esta solución es la mejor idea de 'arreglarlo y seguir adelante'. - Maverick

@Tom, ¿qué quieres decir con que lo probaste y qué hizo en su lugar? ¿Cargaste JQuery? ¿Lo envolvió en una función dom ready? - AlienWebguy

Oh, me refiero a la altura mínima: 100%. - CustomX

Usando CSS prueba esto

<style type="text/css">
#blah{
    border-left-width:Xpx;
    border-left-color:#xxx;
    HERE add all the code for
    content
    }
</style>

donde bla es la identificación de su div, etiqueta de párrafo, etc. y, por supuesto, tendría que personalizar el ancho y el color.

EDITAR el CSS fue editado, pruebe esto, pero en lugar de hacer un div para su borde, agregue esto al div de contenido, que debe tener una altura del 100% o una altura mínima del 100%. Déjame saber como va.

Respondido 27 ago 11, 23:08

Clases también, pero luego cambiarías el "#blah" a ".blah" - Nathan

Su código dice px, lo que significa que solo bajará 100 píxeles. Supongo que te refieres a%, pero eso no funciona. - CustomX

Hubo un div olvidado. ¡Se agregó el div al CSS con 100% de altura y BAM!

Respondido el 05 de Septiembre de 11 a las 20:09

Me alegro de que lo hayas descubierto. Para beneficio de la comunidad, edite esta respuesta para incluir el código de esta solución: Sparky

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.