5

inserir a descrição da imagem aqui

Basicamente meu problema esta na div da cor, e no texto rotacionado.

Eu preciso que a div da cor, tenha a altura minima relativa ao tamanho do texto rotacionado, e que a altura máxima seja relativa à div externa.

Pois terei informações dinâmicas inseridas nas divs de box de informações.

O meu problema esta em fazer a div de cor ter o tamanho minimo relativo ao texto, e a altura máxima relativa ao numero de Divs com informações (e sempre se manter centralizada). (O texto precisa ser rotacionado por Css pois a informação sera inserida via banco de dados)

Segue em exemplo de código

O problema neste código que fiz são os posicionamentos absolutos, que fazem a div de cor não serem relativas a div externa.

Agora o problema é que a div container não fica relativa a altura do min-height do elemento left-panel

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>asd</title>


    </head>
    <style>
       body {margin: 0;}

.container {
    position: relative;
    border:solid 1px black;
    width:800px;
    margin:0 0 5px 0;
}
.left-panel {
    background-color: #DDD;
    min-height: 210px;
    height: 100%;
    width: 40px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 15px;
}

.collapse-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

.chunk {
    height: 50px;
    width: 85%;
    background-color: #f2f2f2;
    float: right;
    padding-left: 10px;
    margin-bottom: 10px;
}
.clear {clear:both;}
.controler {
float:left;
height:auto;
margin-left:20px;
  margin-top:20px;  
}        

    </style>


    <body>

    <div class="controler">    
    <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>


    <div class="clear"></div>
</div>
        <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="clear"></div>
</div>
</div>
    </body>
</html>

RESOLUÇÃO DO PROBLEMA: (Valeu @Chun pela força!)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>asd</title>


    </head>
    <style>
       body {margin: 0;}

.container {
    position: relative;
    border:solid 1px black;
    width:800px;
    margin:0 0 5px 0;
    min-height:210px;
}
.left-panel {
    background-color: #DDD;
    min-height: 210px;
    height: 100%;
    width: 40px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 15px;
}

.collapse-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

.chunk {
    height: 50px;
    width: 85%;
    background-color: #f2f2f2;
    float: right;
    padding-left: 10px;
    margin-bottom: 10px;
}
.clear {clear:both;}
.controler {

    float:left;
    margin:20px 0 0 20px;
    height:auto;
    border:solid 1px red;
}

    </style>


    <body>

    <div class="controler">    
    <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>


    <div class="clear"></div>

        </div>

        <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="clear"></div>
</div>
        </div>
    </body>
</html>

1 Resposta 1

4

Podes fazer isso da seguinte maneira:

body {margin: 0;}

.container {
    position: relative;
}
.left-panel {
    background-color: #DDD;
    min-height: 110px;
    height: 100%;
    width: 40px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 15px;
}

.collapse-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

.chunk {
    height: 50px;
    width: 85%;
    background-color: #f2f2f2;
    float: right;
    padding-left: 10px;
    margin-bottom: 10px;
}
.clear {clear:both;}
<div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="clear"></div>
</div>

Aumenta ou diminui a quantidade de elementos: <div class="chunk">Bloco de texto</div> para poderes ver o painel lateral a adaptar-se à altura do conteúdo principal.

Tens aqui um exemplo no jsFiddle se preferires: http://jsfiddle.net/k73co4kw/

6
  • Não entendi, mais reescrevi o codigo demonstrando o problema, e com as divs nomeadas como a imagem
    – luisaddor
    21/10/2015 às 11:17
  • Editei a minha resposta @luisaddor , dá lá uma olhada no exemplo online do jsFiddle para ver se é isto que querias.
    – Chun
    21/10/2015 às 11:50
  • perfeito, muito Obrigado! Agora é testar no JSF Prime faces pra ver se pega tudo isso hahahaha!
    – luisaddor
    21/10/2015 às 12:05
  • 1
    @luisaddor adiciona um min-height igual ao da class do painel lateral para o .container. Por exemplo:.container{ min-height: 210px;}.
    – Chun
    21/10/2015 às 12:23
  • 1
    verdade, tinha acabado de fazer ia vir auqi comentar, funcionou sim, muito obrigado!
    – luisaddor
    21/10/2015 às 12:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .