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

这看起来很平凡，但我似乎无法得到正确的结果。Div 100％页面高度，没有垂直滚动

我希望创建一个边框我的网页上，像这些家伙都做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/

来源

2017-03-02 Gavin Friel

我想你所有你需要的是添加'左：0像素;底部：0px'以及？更新：https：//jsfiddle.net/knq4L3xf/3/如果你想在右边删除'left' –

上帝保佑你，先生。我确实说过这是微不足道的。非常感谢！！ –

我会把它写成答案，以防你想再次引用它，如果你想要或不需要标记它 –

只需添加bottom:0px到rightframe：

.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/

来源

2017-03-02 23:12:03

的问题是，你正在使用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>

希望这有助于:)

来源

2017-03-02 23:05:16

嗨，黑曜石，我试过这个无济于事。你会注意到，你的小提琴仍然会垂直滚动。边框不适合页面。感谢您的输入所有相同 –

正如我所说，'100vh'计算**视口**的高度。它不会在JSFiddle上工作，因为该部分被分成四个不同的区域，并且它也试图显示它上面的部分（CSS）的高度。它会在你自己的网站:) –

https://jsfiddle.net/cqo218u5/2/它在jsfiddle上工作得很好，因为它使用一个框架来显示结果。一帧中的100vh是框架的高度，而不是窗户。 –

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

https://jsfiddle.net/8c2p70g9/

来源

2017-03-02 23:13:53

添加底部零

.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/

来源

2017-03-02 23:39:15

这里是它使用box-sizing:border-box，以确保您可以使用100％，无溢出一个更可读的版本。

对于那些没有看到原始网站的人来说，请注意边界在4个独立的区段中进行悬停。

我们基本上是将整个边框变成透明的，然后改变特定部分的颜色。总的来说，减少了CSS所需的数量，并且也使得它更容易遵循。

Here it is as a fiddle

注释的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; 
}

的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>

来源

2017-03-02 23:42:30

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

回答

相关问题