HTML fullscreenlayout最小宽度，最大宽度

我有一个项目（例如一个div标签，它占用了1/3的屏幕宽度，最小宽度为500px，最大宽度为700px。除此之外，还有另外一个项目需要占用屏幕的其余部分，如果我只分配了66％的宽度，只要另一个项目的高度不占用最大值之一就可以正常工作，此时发生溢出或项目只是让出空间。HTML fullscreenlayout最小宽度，最大宽度

谁，这是通过HTML没有建立一个过于复杂的JavaScript脚本来完成？

最好的问候，斯特凡

任何想法210

编辑代码：这应该提供一个简单的例子，只要网站低于500px，两者都是屏幕的50％，但如果它变大，右侧（标有世界）应该填写超过50 ％。

<html> 
<head> 
    <style type="text/css"> 
     * { 
      border: 1px solid black; 
     } 

     html,body,.fullheight { 
      height: 99%; 
      width: 99%; 
     } 

     table { 
      table-layout: auto; 
     } 
     .minfield { 
      max-width: 250px; 
      border: 1px solid red; 
      overflow: hidden; 
     } 

     .leftfloat{ 
      float: left; 
     } 

     .maxsize{ 
      height: 99%; 
      width: 49%; 
     } 
    </style>  
</head> 

<body> 
    <div class="fullheight"> 
     <div class="leftfloat minfield maxsize"> 
      <p>hello</p> 
     </div> 
     <div class="leftfloat maxsize"> 
      <p>world</p> 
     </div> 
    </div> 
</body>

Demo | FullScreen

来源

2011-06-22 Stefan

这将有助于如果您可以发布您正在使用的任何css代码。此外，您正在使用的HTML代码将帮助我们找出问题。 –

希望这可以让它更清晰，它尽量保持它尽可能简单 – Stefan

对于我的生活，我没有看到一个最小宽度设置在左div（或最大宽度700px – symlink

可能重复：Make a div fill the remaining screen space

和另： How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

编辑： 看我没有用我刚才所提供的解决方案之一：

<html> 
    <body>  
     <div class="fullHeight">    
      <div class="minField maxSize"><p>hello</p></div>    
      <div class="maxField maxSize"><p>World</p></div>  
     </div> 
    </body> 
</html> 

* {    
    border: 1px solid black;   
} 
html,body,.fullHeight {    
    height: 99%;    
    width: 99%;   
} 

.maxSize{    
    height: 99%;     
} 
.minField{      
    float:left; 
    width:250px; /* This is a must so you could define min/max */ 
    max-width:250px; 
    width: expression(this.width > 250 ? 250: true); /* IE Hack for max-width */ 

    background-color:#ff0000;    
}    
.maxField {      
    margin-left: 250px;   
    background-color:#00FF00;    
}

jsFiddler Code|jsFiddler FullScreen

来源

2011-06-22 08:25:29 Dementic

否，都aren '我在找什么 – Stefan

我可能会理解你错了，我会再次调整我的答案， – Dementic

问题是，我的最大宽度/高度不会始终生效。所以你的帖子并没有错，他们有时会解决我的问题，但大多数时候我只是想使用百分比的布局.....所以我不会绕过一些JavaScript代码....我会发布当我解决它时！ – Stefan

HTML fullscreenlayout最小宽度，最大宽度

回答

相关问题