Bin ich gezwungen, verschachtelte Tabellen für das Layout zu verwenden, um eine Textfläche zu skalieren? (Beispiel html enthalten)

Die Website, die ich erstelle, hat die Anforderung, die Größe einer Textfläche zu erhöhen, wenn die Auflösung steigt.
Ich versuchte dies mit schwebenden und nicht schwebenden divs, aber in jedem Szenario versuchte ich so weit die divs gut ausgerichtet, aber ich hatte keine Möglichkeit, die Textarea Größe zu kontrollieren.
Standardtabellen bieten diese Funktionalität jedoch standardmäßig, mit Ausnahme von 1, dh Kompatibilitätsproblemen.

Der folgende Code funktioniert wie vorgesehen in Firefox und ie (Quircks-Modus)
Standard dh nicht die Größe der Textarea Höhe ändern.
Ich habe nichts dagegen, ein paar out of the box denken, es muss nicht Tabellen Divs oder was auch immer sein, solange es die Arbeit erledigt.
Ich bin mir bewusst, dass Javascript einige Auflösungsberechnungen durchführen kann, aber diese Lösung fühlt sich für ein einfaches Layoutproblem ein wenig zu kompliziert an. Die einfachere & weniger Code desto besser imo.Bin ich gezwungen, verschachtelte Tabellen für das Layout zu verwenden, um eine Textfläche zu skalieren? (Beispiel html enthalten)

<!DOCTYPE html> 
<html> 
<body> 
<table style="width: 100%"> 
<tr> 
    <td style="width: 300px"> 
     <table class="clsDataGrid" width="100%" height="350px"> 
      <tr style="height:350px;background-color:blue;"> 
       <td style="height:350px">test</td> 
      </tr> 
     </table> 
     <br/>  
     <table width="100%"> 
      <tr> 
       <td style="background-color:red;height:100px">test</td> 
      </tr> 
     </table> 
    </td> 

    <td style="padding-left : 1em;height: 100%"> 
     <table class="clsDataGrid" style="width: 100%;height: 100%"> 
      <tr> 
       <th>Description</th> 
      </tr> 
      <tr> 
       <td style="height: 100%"> 
        <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea> 
       </td> 
      </tr> 
     </table> 
    </td> 
    </tr> 
</table> 
</body> 
</html>

Quelle

2012-03-30 Kristof

Wenn Sie eine Breite in Prozent angeben, sollte der Textbereich mit seinem übergeordneten Element skalieren. Aber ich denke, es ist besser, es eine Breite von 100% anstelle von 99% zu geben und den Abstand um ihn herum zu kontrollieren, indem Sie einen Rand auf seinem Elternteil setzen. – GolezTrol

Sie haben einen guten Punkt und ich werde sicher sein, das zu tun. Es behebt jedoch nicht mein Hauptproblem. – Kristof

Ok, also Lösung 3 - ohne js - Sie müssen Tabellen gehen. Passen Sie auf, wie ich das Beschreibungsetikett erzwingen musste - es ist ein Bugfix, nicht dass ich ein Idiot bin.

<!--Solution 3--> 
<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    body {padding:0; margin:0;} 
    table td {vertical-align: top;} 
</style> 
</head> 
<body> 
<table width="100%" height="100%" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="height:350px; background-color:blue; color:white; padding:0 24px;"> 
      Blue Test 
     </td> 
     <td rowspan="2" style="padding:31px 24px 0; position:relative; height:100%"> 
       <label style="position:absolute; top:0; left:24px;">Description</label> 
       <textarea style="resize: none; width:100%; height:100%;">DATAAAAA</textarea> 
     </td> 
    </tr> 
    <tr> 
     <td style="height:100px; background-color:red; color:white; padding:0 24px;"> 
      Red Test 
     </td> 
    </tr> 
</table> 
</body> 
</html>

Wie bei so etwas eine Reihe von Lösungen gibt es - hier sind zwei aus der Spitze von meinem Kopf - ein Ort für Sie zu starten - ich habe nicht testen Cross-Browser.

Ich hoffe, sie helfen.

<!--Solution 1--> 
<!DOCTYPE html> 
<html> 
<body> 
<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:30%;"> 
     <div style="height:350px; background-color:blue; color:white; padding:0 24px;"> 
      Blue Test 
     </div> 
     <div style="height:100px; background-color:red; color:white; padding:0 24px;"> 
      Red Test 
     </div> 
    </div> 
    <div style="display:table-cell; vertical-align:middle"> 
     <div style="padding:0 24px;"> 
      <span>Description</span> 
      <textarea style="resize: none; width:100%;height: 100%">DATAAAAA</textarea> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

<!--Solution 2--> 
<!DOCTYPE html> 
<html> 
<body> 
<div style="width:100%"> 
    <div style="display:inline-block; width:30%;"> 
     <div style="height:350px; background-color:blue;"> 
      Blue Test 
     </div> 
     <div style="height:100px; background-color:red;"> 
      Red Test 
     </div> 
    </div> 
    <div style="display:inline-block; width:69%"> 
     <span>Description</span> 
     <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea> 
    </div> 
</div> 
</body> 
</html>

Quelle

2012-03-30 09:26:39 frazerjay

Ich liebe, wie Sie mein horizontales Sizing-Problem mit divs behoben haben. Dafür danke ich dir. Aber das Höhenproblem scheint immer noch ein Problem in sowohl IE und Firefox. Ich möchte, dass der Textbereich + Beschreibung die gleiche Höhe wie die linke Seite hat. Ich habe versucht, einige Höhen zu 100% zu Ihren beiden Lösungen hinzuzufügen, aber es scheint, dass mir ein grundlegendes Wissen in diesem Bereich fehlt, weil es kein Pixel bewegt. – Kristof

Wenn Sie also gleich links sagen, können Sie klären - Sie möchten, dass der Textbereich 100% Höhe von Rot und Blau aufnimmt und 100% der verbleibenden Breite einnimmt? – frazerjay

Der Textbereich + die Beschreibungsspanne sollte 100% Höhe des blauen und roten Div. – Kristof

Bin ich gezwungen, verschachtelte Tabellen für das Layout zu verwenden, um eine Textfläche zu skalieren? (Beispiel html enthalten)

Antwort

Verwandte Themen