Jump to content

Recommended Posts

Olá pessoal sou novo no CSS e estou com um pequeno problema, deve ser fácil de resolver mas sou novato nessa área. Tenho uma div sidebar com float: rigth e width:300px fixo e tenho uma div responsivo com float:left e width:100%, o que eu preciso é que a div responsivo fique com 100% do lado da sidebar ocupando o máximo que puder, tipo como na imagem. Qual comando posso usar?

gfdg.jpg

Share this post


Link to post
Share on other sites

Simples:

div.responsivo {width: calc(100% - 300px)}

 

Ou seja fazemos o navegador calcular 100% de disponibilidade -300px que é o tamanho da outra div.

Obs.: Só use isso em casos extrema necessidade. Pois se houver certa quantidade de elementos recebendo essa propriedade pode causar lentidão da página.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By geivisonsales
      tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?
    • By s3c0
      Olá pessoal,
       
      boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho?
       
      <div class="navPages-container" > <div class="container"> <nav class="navPages" style="text-align:left;"> <ul class="navPages-list"> <li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a> <div id="menu2"> <ul class="parent-menu"> <li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a> <div class="categoria"> <ul> <li><a href="#11">item1</a></li> <li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li> <li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a> <div class="subcategoria"> <ul > <li><a href="#111">item</a></li> <li><a href="#112">Even more</a></li> <li><a href="#113">item</a></li> <li><a href="#114">item</a></li> <li><a href="#115">item</a></li> </ul> </div> </li> <li><a href="#14">item4</a></li> <li><a href="#15">item5</a></li> <li><a href="#16">item6</a></li> </ul> </div> </li> #menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;} .parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;} .parent-menu li:hover{background:#ccc;cursor:pointer;} .categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}} .categoria ul li:hover{background:#ccc;cursor:pointer;} .categoria ul{list-style-type:none;width:270px;} .categoria ul li{list-style-type:none;width:270px;} .subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}} .subcategoria ul{list-style-type:none;width:270px;} .subcategoria ul li{list-style-type:none;width:270px;} .subcategoria ul li:hover{background:#ccc;cursor:pointer;} .navPages-item:hover #menu2{display:block;} .parent-menu li:hover .categoria{display:block;} .categoria ul li:hover .subcategoria{display:block;} #menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; } #menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }  

    • By Marxrj
      Galera, tenho um carrossel no meu arquivo, porém queria que elas mudassem aleatóriamente a cada refresh na página, pois ela s´fica pela ordem normal.
      <div> <div> <div class="loop owl-carousel owl-theme"> <div> <img src="imagens/jpeg.01"> </div> <div> <img src="imagens/jpeg.02"> </div> <div> <img src="imagens/jpeg.03"> </div> <div> <img src="imagens/jpeg.01"> </div> <div> <img src="imagens/jpeg.05"> </div> <div> <img src="imagens/jpeg.07"> </div> <div> <img src="imagens/jpeg.07"> </div> </div>  
    • By RodrigoCesar
      Boa noite,
      estou tendo a seguinte questão,  estou precisando posicionar elementos (divs) um do lado do outro de forma que fiquem responsivos então os mesmos desçam em fiquem um em baixo do outro em telas menores. Ou seja, quando em tela grande de pc um do lado do outro, em telas menores móveis um em cima do outro. O recomendado pra isso seria usar float, porém preciso que ao ficar um em cima do outro os elementos fiquem centralizados na tela e a propriedade float sempre joga os elementos pra direita ou pra esquerda, não deixa ficar centralizado. Preciso então posicionar um do lado do outro sem uso de float ou encontrar outra solução, segue código abaixo. Desde já agradeço.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div class="blocos_caracteres"> <div class="blocos_caracteres_content_1"> <p>oi</p> </div> <div class="blocos_caracteres_content_2"> <p>oi</p> </div> <div class="blocos_caracteres_content_3"> <p>oi</p> </div> <div class="blocos_caracteres_content_4"> <p>oi</p> </div> </div> </body> </html> /****reset****/ html { margin:0; padding:0; border:0; height:100%; } body { margin:0; padding:0; border:0; height:100%; } ul, ol, li {list-style:none;} /****reset****/ .blocos_caracteres {width:94%; margin: 0 auto; } .blocos_caracteres_content_1 {width:25%; height:300px; min-width: 250px; background-color: yellow; float: left; } .blocos_caracteres_content_2 {width:25% ; height:300px; min-width: 250px; background-color: green; float: left; } .blocos_caracteres_content_3 {width:25% ; height:300px; min-width: 250px; background-color: blue; float: left;} .blocos_caracteres_content_4 {width:25% ; height:300px; min-width: 250px; background-color: red; float: left;}  
    • By Mewmew
      Bom dia!
       Teria como alguém me ajudar? 
      Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo...
       
       Preciso criar um contêiner dentro de outro contêiner igual a imagem 1.
       
      Só que ele está ficando igual a imagem 2.
       
       Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. 
      Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente! 
       



×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.