truncar - texto cortado css
¿Cómo obligo a un bloque DIV a extenderse hasta el final de una página, incluso si no tiene contenido? (18)
En el marcado que se muestra a continuación, estoy tratando de hacer que el contenido div se extienda hasta el final de la página, pero solo se amplía si hay contenido para mostrar. La razón por la que quiero hacer esto es para que el borde vertical aún aparezca en la página incluso si no hay contenido para mostrar.
Aquí está mi HTML :
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
Y mi CSS :
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
Creo que el problema se solucionaría simplemente haciendo que el html se llene al 100% también, podría ser que el cuerpo llene el 100% del html pero html no llena el 100% de la pantalla.
Prueba con:
html, body {
height: 100%;
}
Dependiendo de cómo funciona su diseño, puede salirse con la configuración del fondo en el elemento <html> , que siempre es al menos el alto de la ventana gráfica.
Intenta jugar con la siguiente regla de CSS:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Cambie la altura para adaptarse a su página. la altura se menciona dos veces para compatibilidad con navegadores cruzados.
La propiedad min-height no es compatible con todos los navegadores. Si necesita su # contenido para extender su altura en páginas más largas, la propiedad de altura lo cortará.
Es un poco un hack, pero podrías agregar un div vacío con un ancho de 1px y alto de, por ejemplo, 1000px dentro de tu #content div. Eso forzará que el contenido tenga al menos 1000 px de alto y aún permita que el contenido más largo extienda la altura cuando sea necesario
No es la mejor ni la mejor implementación de los mejores estándares, pero puedes cambiar el DIV para un SPAN ... Es una solución no tan recomendable pero rápida = P =)
No es posible lograr esto usando solo hojas de estilo (CSS). Algunos navegadores no aceptarán
height: 100%;
como un valor más alto que el punto de vista de la ventana del navegador.
Javascript es la solución de navegador cruzada más fácil, aunque como se mencionó, no es una solución limpia o hermosa.
No tengo el código, pero sé que lo hice una vez usando una combinación de altura: 1000px y margen inferior: -1000px; Trata eso.
Pie de página adhesivo con altura fija:
Esquema HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Pruebe http://mystrd.at/modern-clean-css-sticky-footer/
Manifestación:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
Pruebe la solución "Sticky Footer" de Ryan Fait,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Funciona en IE, Firefox, Chrome, Safari y supuestamente Opera también, pero no lo han probado. Es una gran solución. Muy fácil y confiable de implementar.
Puede usar la unidad de longitud "vh" para la propiedad min-height del elemento en sí y sus padres. Es compatible desde IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
Sé que este no es el mejor método, pero no pude resolverlo sin interferir en mi encabezado, menú, etc. Entonces ... Usé una tabla para esas dos columnas. Fue una solución RÁPIDA. No se necesita JS;)
Si bien no es tan elegante como CSS puro, un poco de javascript puede ayudar a lograr esto:
<html>
<head>
<style type=''text/css''>
div {
border: 1px solid #000000;
}
</style>
<script type=''text/javascript''>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload=''expandToWindow(document.getElementById("content"));''>
<div id=''content''>Hello World</div>
</body>
</html>
Su problema no es que el div no esté al 100% de altura, sino que el contenedor que lo rodea no lo esté. Esto ayudará en el navegador que sospecho que está utilizando:
html,body { height:100%; }
Es posible que también deba ajustar el relleno y los márgenes, pero esto le permitirá llegar al 90% del camino. Si necesita hacerlo funcionar con todos los navegadores, tendrá que perder un poco de tiempo.
Este sitio tiene algunos excelentes ejemplos:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
También recomiendo ir a http://quirksmode.org/
También te puede interesar esto: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
No es exactamente lo que pediste, pero también podría satisfacer tus necesidades.
Trataré de responder la pregunta directamente en el título, en lugar de empeñarme en colocar un pie de página en la parte inferior de la página.
Haga que div se extienda hasta el final de la página si no hay suficiente contenido para llenar la ventana del navegador vertical disponible:
Demostración en (arrastre el controlador del marco para ver el efecto): http://jsfiddle.net/NN7ky
(al revés: limpio, simple. inconveniente: requiere flexbox - http://caniuse.com/flexbox )
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - o estoy demasiado soñolienta
Tratar:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Aún no lo he probado ...
puedes piratearlo con la declaración de min-height
<div style="min-height: 100%">stuff</div>