设置竖直的分割符【使用div】 (根据屏幕的大小自适应)

分割符的设置:

<div id="separator" style="float:left; width:1px;  min-height:100% ; background:#808080;  overflow:hidden" ></div>

style 设置:

<style type="text/css">
body,html{
margin:0;
padding: 0;
height: 100%;
}
</style>

设置竖直的分割符【使用div】 (根据屏幕的大小自适应)

时间: 2024-08-02 02:51:38

设置竖直的分割符【使用div】 (根据屏幕的大小自适应)的相关文章

常用布局,div竖直居中

常用两列布局,多列布局和div竖直居中 body { margin: 0; padding: 0; } .w200 { width: 200px; } .mar-left200 { margin-left: 200px; } .red { background-color: red; } .middle { vertical-align: middle; } .block { width: 80%; height: 300px; border: 1px solid #eee; margin: 0

Winform中设置ZedGraph因设置小刻度导致的竖直虚线显示过多

场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100112573 https://www.cnblogs.com/badaoliumangqizhi/p/11422087.html 在上面对ZedGraph的属性进行设置后导致曲线图出现众多竖直虚线. 实现 这是因为对ZedGraph设置了小刻度,将其设置为false即可. ZedGraphCont

水平和竖直滑动条捆绑,表头固定的实现

首先,在很多的网页数据分析或者网站查询数据库的操作中,我们不可避免需要在前端页面中展示所有数据.由于版面构建的问题,导致div内容模块大小,不足以容纳所有数据,这时候我们就必须考虑引入页面的水平或者竖直滚动条.这样能够实现在固定大小的div中,通过滑动滚动条来对所有数据进行检索.这时,我们会发现,如果表头不被固定,我们滑动滚动条时,不能很好的确定当前数据属于什么列是什么样的数据. 所以,在这里我分享一下通过js固定表头的页面操作: 1 //水平.垂直滚动条实现表头标题的固定 2 document

HTML中行内元素的竖直方向的padding和margin是否真的无效

参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的? 接下来就这个问题将具体分析: 1.行内元素拥有盒子模型么 答案是是的.没错,行内元素跟块级元素一样,同样拥有盒子模型. 2.行内元素的padding-top,padding-bottom和margin-top,margin-bottom是否无效 答案同样是是的.盒子

竖直居中方式总结

已知有 html, body { margin: 0; height: 100%; } #child { width: 200px; height: 200px; background: black; } <div id="child"></div> 将元素 #child 竖直居中于窗口中部 绝对定位法 1 对未知高度的元素适用.jsfiddle #child { position: absolute; /* fixed */ top: 50%; transfo

模拟公交站台竖直排列,两端对齐

今天看到一个公家车站台的公家站牌,对站名的排列方式很有兴趣,html和css没有提供文字竖直排列的简便方法,需要我们利用一些技巧才能完成  大概要的效果就是这样的,竖直排列,两端对齐 首先先对竖直排列进行设计 先上html代码: 1 <ul> 2 <li><b>站牌1</b></li> 3 <li><b>站牌2</b></li> 4 <li><b>长站牌3</b>

JavaScript实现竖直文本滚动

一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

自定义Imageview控件实现多种手势操作 (拖动、水平缩放、竖直缩放、等比例缩放、双击、长按)

项目中需要使用自定义控件的多种手势操作,之前在网上查阅资料的时候发现能找到的一般是只实现了其中的几种,这次就把我做的控件分享一下,人人为我,我为人人嘛,哈哈! 这个自定义控件实现的主要功能是控件的拖动和缩放(注意:不是对控件中的图片进行操作,话说很多帖子都把这两个混了),其中缩放可以按照三个方向进行,就是水平.竖直和等比例.双击操作只做了一个提示,长按加上了一个简单的弹出菜单. 抱歉的是没有足够的时间写详细注释了,如果跟你需要的功能相同就请直接调用,要是需要改代码就费点神自己读懂代码吧,看不懂的

Flex实现水平竖直居中布局

传统的布局使用的是“盒模型”加上display.position和float属性,但是对于一些特殊的布局实现例如居中却是比较麻烦,所以,为了解决一些复杂的布局问题,一种更为灵活的布局方式出现了,那就是Flex布局. Flex 即为Flexible Box,指的是“弹性布局”,它可以为盒模型提供更加灵活的布局方式,例如,用flex可以优雅地实现水平竖直居中的布局. 例如下面这个例子,我们想做的是让child元素在parent里面水平竖直居中: <!DOCTYPE html> <html l