Question

这看似微不足道，但我似乎无法做到这一点。

我希望在我的网页周围创建一个边框，就像这些家伙已经做过http://www.codeandpepper.com/

但是我似乎无法在没有垂直滚动的情况下将边框设置在屏幕的100％高度。我希望仍能看到基地的斜接接头。

非常感谢您的帮助。

这是我到目前为止所得到的......

.frame {
  position: absolute;
  z-index: 1000;
}

.frame.rightFrame {
  top: 0px;
  right: 0px;
  border-right: 45px solid red;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  width: 10px;
  height: auto;
}

https://jsfiddle.net/gavinfriel/knq4L3xf/2/

Answer 1

问题是您使用的是height: auto，它采用了内容高度的默认值。

为了使框架占据页面高度的100％，您需要100vh：

.frame.rightFrame {
  height: 100vh;
}

vh是“视口高度”的缩写。我已经创建了一个更新的小提琴，展示了这个here（虽然注意到在JSFiddle上你可能会因为它也会考虑CSS部分的高度而感到有点困惑。）

.frame {
  position: absolute;
  z-index: 1000;
}

.frame.rightFrame {
  top: 0px;
  right: 0px;
  border-right: 45px solid red;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  width: 10px;
  height: 100vh;
}

<div class="frame rightFrame"></div>

希望这会有所帮助：）

Answer 2

只需将bottom:0px添加到右框：

.frame.rightFrame {
  top: 0px;
  right: 0px;
  bottom: 0px;
  border-right: 45px solid red;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  width: 10px;
  height: auto;
}

更新了jsfiddle：https://jsfiddle.net/knq4L3xf/5/

Answer 3

您可以尝试jquery：
$("div").height($(window).height()-90);

https://jsfiddle.net/8c2p70g9/

Answer 4

add bottom zero

.frame.rightFrame {
  top: 0px;
  right: 0px;
  border-right: 45px solid red;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  width: 10px;
  height: auto;
  bottom: 0;
}

https://jsfiddle.net/knq4L3xf/7/

Answer 5

Here's a more readable version which uses box-sizing:border-box to make sure you can use 100% without overflowing.

For those who didn't look at the original website, note that the border is in 4 separate segments for hovering.

We're essentially making the whole border transparent then changing the color of specific segments. Overall that reduces the amount of CSS required, and makes it easier to follow too.

Here it is as a fiddle

The commented CSS:

/*
    Dump the margin and make both html and body 100% high
    (as well as a dark-ish background color)
*/
html,body{
    margin:0;
    height:100%;
    background:#363b46;
}

/*
    Each frame element will be 45px and uses box-sizing.
    That'll make sure the size of the border itself doesn't cause it to overflow, 
    and 100% 'just works'.
    We'll also clear the width so we don't end up with them defaulting to width:auto
    and position them so they can get placed in specific locations.
*/

.frames{
    box-sizing:border-box;
    border:45px solid transparent;
    width:0;
    position:absolute;
}

/*
    Styling specific borders so they end up where they need to be
*/
.frameLeft{
    left:0;
    height:100%;
    border-left-color:#131c30;
}

.frameTop{
    width:100%;
    border-top-color:#131c30;
}

.frameRight{
    right:0;
    height:100%;
    border-right-color:#131c30;
}

.frameBottom{
    bottom:0;
    width:100%;
    border-bottom-color:#131c30;
}

/*
    The hover selectors - these changes specific borders
*/
.frameTop:hover{
    border-top-color:#7b9eeb;
}

.frameRight:hover{
    border-right-color:#7b9eeb;
}

.frameBottom:hover{
    border-bottom-color:#7b9eeb;
}

.frameLeft:hover{
    border-left-color:#7b9eeb;
}

The HTML:

<!-- The four frame parts -->
<div class='frames frameTop'></div>
<div class='frames frameLeft'></div>
<div class='frames frameBottom'></div>
<div class='frames frameRight'></div>

Div 100％页面高度，无垂直滚动

5 个答案: