`
李瑞曦
  • 浏览: 44970 次
  • 性别: Icon_minigender_2
  • 来自: 大荔
社区版块
存档分类
最新评论

页面布局之DIV设置最小高度，并且要有自适应高度

CSS 
阅读更多

<style type="text/css">
/*<![CDATA[*/
div {
    width:200px;
    height:auto!important;
    height:200px;
    min-height:200px;
    border:1px solid green;
    }
/*]]>*/
</style>

动态设置DIV高度：

<script>  function onLoad(){      	
var workSpaceW = document.getElementById("body").parentElement.offsetWidth;//宽度      
  var workSpaceH = document.getElementById("body").parentElement.offsetHeight;//高度    	                     
document.getElementById("flowDiv").style.height = workSpaceH-75 ;           
 }</script>
<body id="body" onload="onLoad()">
<div id="flowDiv" style="width: 150px;; OVERFLOW-X: auto; OVERFLOW: scroll">
dddd</div>
</body>

  

 

 

分享到：
| windows 消息代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    最小高度能自适应高度IE.FF全兼容的div设置.rar

    标题"最小高度能自适应高度IE.FF全兼容的div设置.rar"和描述"最小高度能自适应高度IE.FF全兼容的div设置"所指向的知识点，主要涉及到CSS（层叠样式表）中的最小高度（min-height）属性以及如何实现跨浏览器的兼容性...

    div控制最小高度又自适高度

    有时候，我们需要一个`div`既能保持一个最小的高度，以确保页面的基本结构，同时又能根据内部内容自动扩展其高度，以适应不同数量的内容。这在网页设计中是一项常见的需求，尤其在响应式设计和动态内容加载的场景下...

    css+div自适应窗口宽度

    在示例代码中，`.divGlobal`, `.DivTop`, `.DivBottom`这三个类都设置了`min-width`为760px，这表示这些div元素的最小宽度为760像素。当浏览器窗口宽度小于760像素时，这些div元素的宽度将不再缩小，以保证内容的...

    设置DIV最小高度以及高度自适应随着内容的变化而变化

    在网页设计中，我们经常需要对`&lt;div&gt;`元素进行高度控制，以便实现更好的视觉效果。...通过设置最小高度和自适应高度，我们可以确保在任何情况下，`&lt;div&gt;`都有良好的视觉表现，同时保持内容的可读性和布局的稳定性。

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等）

    例如，若要将一个`div`的四个角都设置为10像素的圆角，我们可以这样编写CSS： ```css .rounded-div { border-radius: 10px; } ``` 接下来是`div`的自适应宽度。在响应式网页设计中，我们常常希望`div`能根据...

    html图片自适应手机屏幕大小的css写法

    文档中还包含了一些其他响应式设计相关的技巧，如设置最小宽度、媒体查询（虽然没有在给定内容中直接展示）和相对单位的使用。这些技巧有助于在不同屏幕尺寸下提供一致的布局和样式效果。 总结以上知识点，我们了解...

    宽度自适应三列布局（且最小宽度500px）

    DIV三列布局，宽度自适应（且最小宽度500px）

    iframe高度自适应

    ### iframe高度自适应知识点详解 在网页开发过程中，经常会遇到需要将一个页面嵌入到另一个页面中的场景，这时就会用到`&lt;iframe&gt;`标签。然而，默认情况下，`&lt;iframe&gt;`的高度是固定的，当其内部内容发生变化时，可能...

    jquery自适应屏幕图片瀑布流布局代码

    5. **布局算法**：实现瀑布流的关键在于找到每列的最小高度。遍历所有列，找出当前高度最小的一列，将新的图片添加到该列下方。重复这个过程直到所有图片都已布局。 6. **图片加载处理**：由于图片可能延迟加载，...

    CSS 实现div宽度根据内容自适应

    总结来说，CSS实现div宽度根据内容自适应主要有`display: inline-block`、Flexbox和Grid布局等方法。选择哪种方法取决于项目需求、浏览器兼容性和个人喜好。在实际开发中，通常会结合使用这些技术，以实现最佳的跨...

    最小高度能自适应高度IE.FF全兼容的div设置特效代码

    标题 "最小高度能自适应高度IE.FF全兼容的div设置特效代码" 涉及的是前端开发中的一个常见问题，即如何在不同浏览器（尤其是IE和Firefox）中实现一个div元素的最小高度自适应其内容高度，并保持良好的兼容性。...

    div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题

    总的来说，通过合理设置 `li`、`ul` 和 `div` 的高度属性，以及使用 `clear:both` 解决浮动问题，我们可以实现 `div` 高度自适应 `li` 的功能。当在 `ul` 中添加更多 `li` 时，这个结构会自动扩展其高度以适应新的...

    angularjs 页面自适应高度的方法

    如果页面高度只在初始化时需要调整，那么使用`autoHeight`指令更为简单；如果需要响应窗口尺寸的变化，`resize`指令则是更好的选择。在实际开发中，可以根据具体场景进行选择或结合使用。记住，无论采用哪种方式，都...

    里面的div怎么撑开外面的div让高度自适应

    总结起来，要实现外部 `div` 高度自适应内部 `div` 的效果，可以结合使用 `min-height` 和清除浮动的策略。对于 IE6 及其之前的版本，需要特别处理以确保兼容性。随着浏览器更新换代，现代浏览器已经很好地支持了...

    CSS：Div高度、宽度自应等技巧演示文件集合。

    -百分比单位：使用百分比设置宽度和高度，可以让Div根据其父元素的大小进行自适应。 - 弹性盒模型（Box Sizing）：通过`box-sizing: border-box;`使元素的边框和内填充计算在总宽度和高度内。 4. **实战应用**： ...

    Firefox div高度自适应

    1. 使用`min-height`属性：`min-height`用于设置元素的最小高度，当内容超过这个最小高度时，元素高度会自动扩展。然而，IE6及更早版本不支持此属性。为了解决这个问题，开发者通常需要使用hack技巧或者JavaScript来...

    IE6的双倍边距和火狐自适应高度

    1. **显式定义高度：** 可以为`&lt;div&gt;`显式设置一个高度，但这不是最优解，因为它限制了布局的灵活性。 2. **使用`min-height`属性：** 在现代浏览器中，可以使用`min-height`属性来确保`&lt;div&gt;`至少具有某个最小高度...

    Div+CSS基础代码网页布局+实例教程.pdf

    【CSS基础】 CSS，全称Cascading Style Sheets...CSS的宽度、高度、最小高度、自适应宽度以及边框属性，共同帮助开发者实现复杂且响应式的网页布局。理解和熟练掌握这些基础知识，是成为一名优秀前端开发者的必备条件。

    jquery自适应照片瀑布流

    这种布局方式能够让页面中的元素根据浏览器窗口大小自适应地排列，形成一种类似瀑布的效果，即每一列的高度会随着内容的不同而变化，而相邻的列会在某一水平线上对齐。在本教程中，我们将深入探讨如何使用jQuery实现...

Magicbox
Global site tag (gtag.js) - Google Analytics