获得元素的高度与sass [英] Get height of element with sass

问题描述

我创建了一个网站，并将我的 nav -element的背景颜色设为0.7。我这样做是因为在背景上我会放置一个图像。在这张图片上我添加了一个示例和我的代码。



在这里你可以找到我的代码：

 <   nav     class   =  navbar >  
 <   ul     class   =  nav >  
 <   li  >  <   a     href   = ＃ > 登录<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 注册<   / a  >  < span class =code-keyword><   / li  >  
 <   / ul  >  
 <   div     class   =  cf >  <   / div   >  
 <   / nav  >  
 <   img     src   =  http： //www.siwallpaperhd.com/wp-content/uploads/2016/03/tv_series_viking_background_wallpaper.jpg\" /  >  

  body  {
  margin  ：  0;  
} 
 
  img  {
  width  ：  100％;  
  position  ：  relative;  
  top  ：  -25px;   //  需要导航栏的高度。 
  z-index  ：  -1;  
} 
 
  nav  {
  background-color  ：  rgba（150,0,0,0.7）;  
  margin  ：  0;  
 
  ul  {
  margin  ：  0;  
  list-style-type  ：  none;  
 
  li  {
  float  ：  left;  
  margin  ：  15px;  
 
  a  {
 颜色 ：  white;  
 } 
 }  
 }  
 }  
 
。 cf  {
  clear  ：  left;  
} 

这里有图片。



这里有小提琴 [ ^ ]。



现在我的问题是：我怎样才能通过SaSS获得导航栏的高度？



我尝试了什么：



在互联网上搜索但未找到任何内容

解决方案

你有问题ng为最终 - 计算 - 高度？

你不能...... SASS不能做什么CSS不能做...

所以唯一的选择明确指定高度并将其用作固定值...

  nav  {
  background-color  ：  rgba（150,0,0,0.7）;  
  margin  ： < span class =code-keyword> 0;  
  height ：  50px;   
 
  ul  {
  margin  ：  0;  
  list-style-输入 ： 无;  
 
  li  {
  float  ：   left;  
  margin  ：   15px;  
 
  a  {
 颜色 ：  white;  
} 
 }  
 }  
 
  img  {
  width  ：  100％;  
  position  ：  relative;  
  top ：  -50px;   //  需要导航栏的高度。  
  z-index  ：  -1;  
} 
 }  

I make a website and make the background color of my nav-element to 0.7. I do this because on the background I'll place an image. On this image I've added an example and my code.

Here you could find my code:

<nav class="navbar">
    <ul class="nav">
        <li><a href="#">Log in</a></li>
        <li><a href="#">Register</a></li>
    </ul>
    <div class="cf"></div>
</nav>
<img src="http://www.siwallpaperhd.com/wp-content/uploads/2016/03/tv_series_viking_background_wallpaper.jpg"/>

body {
    margin: 0;
}

img {
    width: 100%;
    position: relative;
    top: -25px; // need height of navbar.
    z-index: -1;
}

nav {
    background-color: rgba(150, 0, 0, 0.7);
    margin: 0;
    
    ul {
        margin: 0;
        list-style-type: none;
        
        li {
            float: left;
            margin: 15px;
            
            a {
                color: white;
            }
        }
    }
}

.cf {
    clear: left;
}

Here you have an image.

Here you have a Fiddle[^].

Now my question is: how could I get the hight of my navbar with SaSS?

What I have tried:

Search on the internet but nothing found

解决方案

You are asking for the final - computed - height?
You can not... SASS can't do nothing that CSS can't do...
So the only options is specifying the height explicitly and use it as fixed value...

nav {
    background-color: rgba(150, 0, 0, 0.7);
    margin: 0;
    height: 50px;

    ul {
        margin: 0;
        list-style-type: none;
        
        li {
            float: left;
            margin: 15px;
            
            a {
                color: white;
            }
        }
    }

img {
    width: 100%;
    position: relative;
    top: -50px; // need height of navbar.
    z-index: -1;
}
}

这篇关于获得元素的高度与sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！