0

Tengo 2 DIVs, de los cuales unos es el header(quiero que este verticalmente a la izquierda) y otro es el cuerpo de la pagina(quiero que este en la parte derecha). Utilizo flex para posicionarlos, el header quiero que este fijo por lo tanto le pongo un position:fixed. El problema viene en el div del cuerpo, quiero que solo ocupe el ancho posible teniendo en cuenta el header, pero al estar el header en position fixed el div del cuerpo también coge el ancho respectivo del header.

app.component.html

<div class="row">
  <app-header></app-header>
  <section>
    <router-outlet></router-outlet>
  </section>
</div>

scss header

.header {
  position: fixed;
  width: 200px;
  height: 100vh;
}

html body

<main style="width: 100%"class="row-center-wrap">
  <section>
    <p>Aaaaaaaaaaaaaaaaaaaa</p>
  </section>
</main>
3
  • Hola @ramses797, puedes agregar el codigo que tienes? De esta forma es mas facil para la comunidad ayudarte.
    – Ragnar
    Commented el 9 mar. 2021 a las 17:52
  • Y qué tal si en ves de colocarlo en posición fixed porqué no usas float:right;
    – DABL03
    Commented el 9 mar. 2021 a las 20:10
  • porque el hacer scroll, el header lo hace también
    – ramses797
    Commented el 10 mar. 2021 a las 16:50

1 respuesta 1

0

ese problema se puede resolver colocándole padding-left al body con el ancho del menú vertical, te dejo un pequeño ejemplo, modifique un poco tu html para que se comprendiera.

Los z-index son para que las opciones que coloques en el menú no se queden debajo del body.

.count-header {
  position: fixed;
  width: 200px;
  height: 100vh;
  z-index: 2;
}

.count-body {
  position: relative;
  width: 100%;
  padding-left: 200px;
  z-index: 1;
}
<div class="row">
  <app-header class="count-header"></app-header>
  <section class="count-body">
    <router-outlet></router-outlet>
  </section>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.