vmin - width css
¿Altura de página al 100% de la ventana gráfica? (3)
Aquí hay un ejemplo de código simplificado del HTML:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
y aquí está el CSS usando vh:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
Desde aquí: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
Esto funciona para mi.
Comenzaré diciendo que soy muy nuevo en el desarrollo web en general y que este es mi primer sitio de respuesta, así que, por favor, sea amable y tenga esto en cuenta. En esta etapa, soy la definición de la palabra noob. Habiendo buscado una respuesta por un tiempo y sin suerte, espero que alguien aquí pueda ayudarme.
Estoy tratando de hacer una página de inicio para este sitio web. El diseño es simplemente un bloque en el lado izquierdo de la página que muestra el logotipo en la parte superior y luego una serie de enlaces debajo, todos los cuales están en el mismo fondo. A la derecha de esto hay una imagen grande que llena el resto de la pantalla. Quiero que toda la página llene la ventana del navegador de cualquier dispositivo en el que se vea, por lo que no es necesario ningún desplazamiento, es decir, el ancho y el alto, ambos al 100% de la ventana gráfica. El ancho de la página no me causa ningún dolor, me adapto a diferentes tamaños de pantalla como lo deseo, con la barra lateral al 20% del ancho y la imagen principal al 80%.
La altura es una historia diferente sin embargo. No puedo parecer, en ninguna combinación de CSS que haya intentado hasta ahora, ser capaz de obtener la altura necesaria para comportarme en el 100% de la vista. O bien la barra lateral es demasiado corta y la imagen principal es demasiado larga o ambas son demasiado largas, etc. La imagen principal quiero mantener la relación de aspecto y solo hacer que se desborde a su div como sea necesario para mantener la mayor parte de la imagen y el lado barra Sólo quiero ajustarme al 100% de la altura de la página. Aquí está mi código en la actualidad:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
Cualquier ayuda con esto sería realmente apreciada y no dude en señalar cualquier error masivamente amateur. Estoy dispuesto a tomar cualquier crítica y aprender de ella. Gracias
Código de muestra para la cobertura exacta de la altura de la página.
HTML
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
Main content
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 1020px;
margin: auto;
height: 100%;
background: #ddd;
padding:16px;
box-sizing:border-box
}
.header,.content{
background:#fff;
padding:16px
}
.content{
margin-top:16px;
min-height:calc(100% - 160px);
}
Enlace de ejemplo: https://codepen.io/rahdirs/pen/jeRVod
Te he hecho una configuración básica para mostrar cómo le darías estilo a esto. La mejor manera que he encontrado para establecer la altura al 100% es con el uso de jQuery / Javascript. Puede encontrar la altura de la ventana y luego ingresarla en el css con el uso de la misma.
La forma en que funciona es la var wH = $(window).height(); es encontrar la altura y convertirla en un número. Luego, cuando usas $(''.sideBar'').css({height: wH}); estás ingresando la altura en el css de la barra lateral.
jQuery
function windowH() {
var wH = $(window).height();
$(''.sideBar, .mainImg'').css({height: wH});
}
windowH();
Esta función que escribí está dando a esos dos elementos la altura de la ventana. Esto permitirá que esos dos elementos sean el 100% de la ventana de cualquier navegador.
También recomiendo convertir esa nav en una ul que he incluido en el violín para mostrar cómo es posible.
JSFIDDLE (Eliminar ''mostrar'' al final de la url para ver el código)
Lo siguiente que necesitará investigar son media queries para ajustar el contenido para adaptarse mejor a los dispositivos móviles. Considere cambiar la barra lateral a un navegador horizontal cuando esté en dispositivos móviles.
Si quieres un enfoque de CSS puro, entonces puedes hacer algo como esto,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
Al agregar altura y anchura al 100% en su html / body , puede usar la height: 100% en otros elementos para llenar toda la página.
Consulte este JSFIDDLE para ver cómo funciona.